/* ELLSMS — پنل هوشمند پیامک
   طراحی بر پایه‌ی رنگ‌های لوگو: بنفش‌آبی (indigo) تا آبی روشن، با تایپوگرافی
   فارسی یکدست (وزیرمتن) که سلسله‌مراتب را با وزن و اندازه می‌سازد، نه با
   ترکیب چند فونت. اعداد تاریخ و زمان همیشه فارسی؛ شماره‌موبایل و اعداد خام
   (اعتبار، کد) به‌صورت لاتین و چپ‌به‌راست ایزوله می‌مانند تا خوانا و
   کپی‌پذیر بمانند. */

/* Self-hosted Vazirmatn. This was previously an external webfont import; the
   font is now served from this application's own assets, so the panel has no
   runtime dependency on any third-party font service. All @font-face rules live
   in fonts.css and nowhere else. */
@import url('/assets/css/fonts.css');

:root {
  --indigo: #4a32e8;
  --blue:   #2e63f6;
  --ink:    #0b1023;
  --muted:  #666f87;
  --line:   #e6e4f5;
  --canvas: #f7f7fb;
  --tint:   #eef1ff;
  --card:   #ffffff;
  --ok:     #157347;  --ok-bg:   #e7f8ef;
  --warn:   #b45309;  --warn-bg: #fdf3e3;
  --err:    #c0223a;  --err-bg:  #fdeaee;
  --grad: linear-gradient(120deg, var(--indigo), var(--blue));
  /* --lp-accent is a text/icon accent for the public marketing pages only.
     It defaults to --indigo (a no-op everywhere else) and is overridden to a
     brighter violet inside .lp-body's dark theme below, where plain --indigo
     text would not have enough contrast against a near-black page. */
  --lp-accent: var(--indigo);
  /* --font-ui is THE default typeface of the panel. Everything that renders
     prose, labels, buttons, tables and form controls resolves to this. Tahoma
     is the first fallback because it ships with Windows and covers Persian, so
     a failed font load degrades to something readable rather than to a Latin
     face that cannot draw Persian at all. */
  --font-ui: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif;

  /* --font-mono is for DIAGNOSTIC values only: provider_message_id, API keys,
     hashes, request IDs, JSON. These need fixed-width digits so a 19-digit
     reference can be read and compared character by character. Vazirmatn is
     deliberately NOT in this stack — it is proportional, and listing it first
     (as this variable previously did) meant "monospace" values were never
     actually monospaced. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* --font-num is for DISPLAY numerals: dashboard stat values, price amounts,
     chart labels. These are branded headline numbers, not diagnostic strings —
     they want the UI face, kept LTR and tabular so digits align in a column.
     This is what the old --mono was actually being used for at those sites, so
     they keep their exact current appearance. */
  --font-num: var(--font-ui);

  /* Legacy aliases, kept so existing call sites work without renaming unrelated
     CSS. --mono maps to --font-num (its historical behaviour: Vazirmatn first)
     rather than to --font-mono, so repointing diagnostics to a true monospace
     does not silently restyle the dashboard's headline numbers. */
  --font: var(--font-ui);
  --mono: var(--font-num);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { direction: rtl; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.85 var(--font);
  color: var(--ink);
  font-feature-settings: "ss01" 1;
  background:
    radial-gradient(circle at 6% 4%, rgba(74,50,232,.05), transparent 32%),
    radial-gradient(circle at 96% 96%, rgba(46,99,246,.05), transparent 32%),
    var(--canvas);
  overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* GLOBAL TYPOGRAPHY FLOOR.
   Form controls are the reason this block exists: browsers do NOT inherit
   font-family into <input>, <select>, <textarea>, <button> or <option> from
   body — the UA stylesheet substitutes a system face — so without naming them
   explicitly the panel's inputs would silently render in a different font from
   everything around them. <option> is listed because Windows in particular
   styles dropdown items from the UA sheet rather than from the <select>.
   Declared once here rather than repeated per component. */
html,
body,
button,
input,
select,
textarea,
option,
optgroup,
table,
th,
td,
a,
label,
legend,
fieldset,
dialog,
[role="dialog"] {
  font-family: var(--font-ui);
}

/* Latin/Western digits (phone numbers, raw amounts) stay LTR & isolated
   so they don't get visually reversed inside RTL text. */
.ltr, .msisdn, .num, code.kbd {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* DIAGNOSTIC VALUES — genuinely fixed-width.
   provider_message_id, API keys, hashes, request IDs, gateway/route codes and
   JSON are read character by character and compared against a provider's
   dashboard, so every glyph must occupy the same width. A 19-digit reference
   such as 4473621976262727360 is only checkable by eye when its digits line up.
   These values are strings, never numbers: word-break keeps a long reference
   inside its table cell instead of widening the row, and tabular-nums stops a
   proportional '1' from making two equal-length IDs look different lengths.
   CSS affects presentation only — the underlying value is never altered.

   Placed AFTER the .ltr/.msisdn rule above on purpose: an element carrying both
   (e.g. class="ltr provider-ref") must resolve to the monospace face, and these
   selectors tie on specificity, so source order decides. code.kbd is the one
   deliberate exception — it is a keyboard hint in running prose, not a value to
   transcribe — and it keeps the UI face via its higher specificity above. */
.mono, code, kbd, samp, pre,
.provider-ref, .api-key, .hash, .request-id,
input.mono, textarea.mono, input.provider-ref, textarea.api-key {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
.provider-ref, .api-key, .hash, .request-id {
  word-break: break-all;
  user-select: all;
}

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; flex: 0 0 240px;
  background: var(--ink);
  color: #cfd4ea;
  display: flex; flex-direction: column;
}
.sidebar::before {
  content: ""; display: block; height: 4px;
  background: var(--grad);
}
.brand { display: block; padding: 20px 18px 10px; }
.brand img { width: 100%; border-radius: 12px; background: #fff; }
.nav-label {
  font-size: 12px; letter-spacing: .02em;
  color: #8892b3; padding: 20px 20px 8px;
  position: relative; font-weight: 600;
}
.nav-label::after {
  content: ""; position: absolute; right: 20px; bottom: 3px;
  width: 24px; height: 2px; background: var(--grad); border-radius: 2px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 20px; color: #cfd4ea; font-weight: 500;
  transition: background-color .15s ease;
}
.nav-item:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.nav-item.is-active {
  background: var(--grad); color: #fff;
  box-shadow: inset -3px 0 0 rgba(255,255,255,.55);
}
.nav-icon { width: 18px; text-align: center; opacity: .9; }
.sidebar-foot { margin-top: auto; padding: 16px 20px; font-size: 12px; color: #6f7899; direction: ltr; text-align: right; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 26px; position: sticky; top: 0; z-index: 5;
}
.page-title { font-size: 20px; margin: 0; font-weight: 800; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.credit-pill {
  background: var(--tint); color: var(--indigo);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600;
}
.user-chip { color: var(--muted); font-size: 14px; }

/* Mobile menu toggle — hidden on desktop, shown via the media query below */
.menu-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 40px; height: 40px; flex: 0 0 40px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; padding: 0;
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

.sidebar-backdrop { display: none; }

.content { padding: 26px; max-width: 1200px; width: 100%; }

/* ---------- Cards / grid ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(11,16,35,.04), 0 10px 28px rgba(11,16,35,.035);
  transition: box-shadow .15s ease;
}
.card h2 { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px;
}
.stat .stat-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat .stat-value { font-size: 27px; font-weight: 800; font-family: var(--mono); margin-top: 4px; direction: ltr; unicode-bidi: isolate; display: block; text-align: right; }
.stat.stat-accent { background: var(--grad); border: 0; color: #fff; }
.stat.stat-accent .stat-label { color: #dfe6ff; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
input[type=text], input[type=password], input[type=number], input[type=email],
input[type=date], select, textarea {
  width: 100%; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font-family: inherit; font-size: 16px; background: #fff; color: #0b1023;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 112px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(46,99,246,.15); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hint { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 4px; }

.btn {
  display: inline-block; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--ink);
  transition: filter .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; filter: brightness(.98); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--grad); border: 0; color: #fff; }
.btn-danger  { background: var(--err-bg); color: var(--err); border-color: #f4c9d1; }
.btn-ghost   { border-color: var(--line); color: var(--muted); }
.btn-sm      { padding: 5px 12px; font-size: 13px; border-radius: 7px; }
.btn-block   { width: 100%; }

/* Persian date / time pickers (three selects) */
.jdate, .jtime { display: inline-flex; gap: 6px; align-items: center; }
.jdate select, .jtime select { width: auto; margin-top: 0; padding: 8px 8px; }
.jtime-sep { color: var(--muted); font-weight: 700; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; font-weight: 700; color: var(--muted); }
tr:hover td { background: #f9f9ff; }

/* ---------- Badges / flash ---------- */
.badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.badge-active, .badge-ok, .badge-delivered { background: var(--ok-bg); color: var(--ok); }
.badge-pending, .badge-processing { background: var(--warn-bg); color: var(--warn); }
.badge-failed, .badge-send_failed, .badge-undelivered, .badge-cancelled, .badge-off { background: var(--err-bg); color: var(--err); }
.badge-done, .badge-user, .badge-sent { background: var(--tint); color: var(--indigo); }
.badge-unknown { background: var(--line); color: var(--muted); }
.badge-admin { background: var(--ink); color: #fff; }

.badge-open { background: var(--warn-bg); color: var(--warn); }
.badge-answered { background: var(--tint); color: var(--indigo); }
.badge-closed { background: var(--ok-bg); color: var(--ok); }

/* ---------- Send confirmation modal (inline, same-page — see cost_preview.php) ---------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 80;
  background: rgba(11,16,35,.5); backdrop-filter: blur(2px);
  align-items: flex-start; justify-content: center;
  padding: 5vh 16px; overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }
.modal-dialog {
  width: 100%; max-width: 640px; margin: auto 0;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(11,16,35,.28);
  animation: modal-in .18s ease;
}
.modal-dialog .card { margin-bottom: 0; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ticket-thread { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.ticket-msg { padding: 12px 16px; border-radius: 10px; background: var(--tint); }
.ticket-msg.is-admin { background: var(--ink); color: #fff; }
.ticket-msg-meta { font-size: 12px; opacity: .7; margin-bottom: 6px; }

.flash { border-radius: 11px; padding: 12px 16px; margin-bottom: 18px; font-weight: 500; }
.flash-success { background: var(--ok-bg); color: var(--ok); }
.flash-error   { background: var(--err-bg); color: var(--err); }
.flash-info    { background: var(--tint); color: var(--indigo); }

/* ---------- Simple bar chart (dashboard, no JS) ---------- */
.bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 8px; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.bar .bar-fill { background: var(--grad); border-radius: 6px 6px 0 0; min-height: 2px; }
.bar .bar-x { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.bar .bar-v { font-size: 11.5px; font-family: var(--mono); direction: ltr; color: var(--ink); margin-bottom: 4px; }

/* ---------- Login ---------- */
.login-body {
  display: grid; place-items: center; min-height: 100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(74,50,232,.10), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(46,99,246,.10), transparent 40%),
    var(--canvas);
}
.login-card {
  width: min(410px, 92vw); background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px;
  box-shadow: 0 24px 60px rgba(11,16,35,.10);
  position: relative;
}
.login-card::before {
  content: ""; position: absolute; top: -4px; left: -1px; right: -1px; height: 4px;
  background: var(--grad); border-radius: 18px 18px 0 0;
}
.login-logo { width: 74%; display: block; margin: 0 auto 16px; }
.login-foot { text-align: center; color: var(--muted); font-size: 12.5px; margin: 16px 0 0; }
.login-sub { text-align: center; color: var(--muted); margin: -8px 0 16px; font-size: 13.5px; }

/* ---------- Misc ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
.toolbar > * { margin-bottom: 0; }
.pagination { display: flex; gap: 8px; margin-top: 16px; }
.msg-preview { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--muted); text-align: center; padding: 34px 0; }

/* ---------- Profile / KYC — account-type switcher ---------- */
.segmented {
  display: inline-flex; background: var(--canvas); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; gap: 4px;
}
.segmented input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 22px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: background .15s ease, color .15s ease; user-select: none;
}
.segmented input[type=radio]:checked + label { background: #fff; color: var(--indigo); box-shadow: 0 1px 2px rgba(11,16,35,.08); }
.segmented input[type=radio]:disabled + label { cursor: default; opacity: .6; }
.segmented input[type=radio]:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Profile — read-only / central-system fields ---------- */
.field-readonly { position: relative; }
.field-readonly input,
input[type=text][readonly], input[type=text]:disabled,
select:disabled { background: var(--canvas); color: var(--muted); cursor: not-allowed; }
.field-source { font-weight: 400; color: var(--muted); font-size: 11px; margin-inline-start: 6px; }

/* ---------- Profile — summary/overview strip ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.summary-item { background: var(--canvas); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.summary-item .summary-label { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.summary-item .summary-value { font-size: 15px; font-weight: 700; margin-top: 4px; word-break: break-word; }
.summary-item .summary-value.ltr { direction: ltr; unicode-bidi: isolate; display: block; text-align: right; }

/* ---------- Profile — sub-sections within one card ---------- */
.subsection { margin-bottom: 22px; }
.subsection:last-child { margin-bottom: 0; }
.subsection-title {
  font-size: 13.5px; font-weight: 800; color: var(--indigo); margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.subsection-title::before { content: ""; width: 4px; height: 14px; border-radius: 3px; background: var(--grad); display: inline-block; }

/* ---------- KYC document tiles ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.doc-tile {
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; transition: box-shadow .15s ease;
}
.doc-tile:hover { box-shadow: 0 6px 18px rgba(11,16,35,.06); }
.doc-tile-thumb {
  height: 128px; background: var(--canvas); display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); overflow: hidden; position: relative;
}
.doc-tile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-tile-icon { font-size: 34px; opacity: .35; }
.doc-tile-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.doc-tile-title { font-size: 13.5px; font-weight: 700; }
.doc-tile-note { font-size: 12px; color: var(--err); background: var(--err-bg); border-radius: 8px; padding: 6px 9px; }
.doc-tile-foot { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--canvas); }
.doc-tile-foot form { display: flex; align-items: center; gap: 8px; margin: 0; }

/* A styled stand-in for the raw file input: the native <input type=file> is visually hidden and its
   label takes over as a normal-looking button, with the chosen filename echoed beside it via a tiny
   inline script (no upload/validation behavior changes — purely cosmetic). */
.file-picker { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.file-picker input[type=file] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.file-picker-btn {
  flex: 0 0 auto; border: 1px dashed var(--line); border-radius: 8px; background: var(--tint);
  color: var(--indigo); font-size: 12px; font-weight: 700; padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.file-picker-name { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .menu-toggle { display: flex; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; right: 0; height: 100vh;
    width: min(78vw, 300px); flex: 0 0 auto;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 60;
    box-shadow: -12px 0 32px rgba(11,16,35,.18);
  }
  .sidebar.is-open { transform: translateX(0); }

  .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(11,16,35,.42);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 55;
  }
  .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .brand img { width: 170px; }
  .content { padding: 16px; }
  .topbar { padding: 12px 16px; }
  .page-title { font-size: 17px; }

  /* Comfortable touch targets */
  .nav-item { padding: 13px 20px; font-size: 15px; }
  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 34px; }
}

@media (max-width: 480px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 12px; }
  .card { padding: 16px; border-radius: 12px; }
  .topbar { padding: 10px 12px; }
  .page-title { font-size: 16px; }
  .credit-pill { font-size: 12px; padding: 5px 11px; }
  .user-chip { font-size: 13px; }
  table { font-size: 12.5px; }
  th, td { padding: 8px 8px; }
  .stat .stat-value { font-size: 22px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > * { width: 100%; }
  .doc-grid, .summary-grid { grid-template-columns: 1fr; }
  .segmented { display: flex; }
  .segmented label { flex: 1; }
}

/* ---------- Marketing landing page ---------- */
/* Dark, glass theme for the public marketing pages (landing/contact/guide) —
   scoped to .lp-body so the logged-in dashboard (a plain <body>, no class,
   defined via app/views/header.php) keeps the light theme untouched. Nearly
   every landing component already reads var(--card)/var(--line)/var(--ink)/
   var(--muted)/var(--canvas)/var(--tint), so redefining those tokens here
   repaints the whole page — cards become frosted glass, borders become
   hairline-on-dark, text inverts — without rewriting each component. */
.lp-body {
  overflow-x: hidden;
  --ink: #f3f4fb;
  --muted: #a6acce;
  --line: rgba(255, 255, 255, .14);
  --canvas: #060814;
  --tint: rgba(255, 255, 255, .07);
  --card: rgba(255, 255, 255, .055);
  --lp-accent: #a78bfa;
  /* --ok/--ok-bg are the dashboard's "delivered" status colors (dark green on
     light mint) — overridden here as one consistent pair to a bright green on
     translucent green, everywhere they're used on this dark page (the phone
     mockup's delivered tick, the comparison table's checkmarks, the pricing
     check-badges). Scoped to .lp-body so the dashboard's own badges, which
     assume a light background, are untouched. */
  --ok: #34d399;
  --ok-bg: rgba(34, 197, 94, .16);
  background:
    radial-gradient(circle at 14% 0%, rgba(124, 58, 237, .35), transparent 42%),
    radial-gradient(circle at 90% 8%, rgba(46, 99, 246, .28), transparent 40%),
    radial-gradient(circle at 50% 75%, rgba(21, 163, 74, .10), transparent 46%),
    radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--canvas);
}
@media (prefers-contrast: more) { .lp-body { background-image: none; background: var(--canvas); } }

.lp-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6, 8, 20, .68); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.lp-nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 14px 26px;
  display: flex; align-items: center; gap: 22px;
}
.lp-brand { flex: 0 0 auto; display: block; line-height: 0; }
/* The logo file itself has a baked-in white background (not transparent),
   so on the dark theme it gets a matching white badge chip instead of
   floating as a stray bright rectangle. */
.lp-brand img { height: 46px; border-radius: 10px; background: #fff; padding: 6px 14px; }
.lp-nav-links { display: flex; gap: 24px; flex: 1; }
.lp-nav-links a { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.lp-nav-links a:hover { color: var(--lp-accent); text-decoration: none; }
.lp-nav-cta { flex: 0 0 auto; }
.lp-nav-toggle {
  display: none; flex: 0 0 auto; width: 38px; height: 38px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); cursor: pointer; padding: 0;
}
.lp-nav-toggle svg { width: 20px; height: 20px; }

.lp-hero {
  max-width: 780px; margin: 0 auto; padding: 76px 26px 40px; text-align: center;
}
.lp-eyebrow {
  display: inline-block; background: var(--tint); color: var(--lp-accent);
  border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 700; margin: 0 0 18px;
}
.lp-hero h1 { font-size: 48px; line-height: 1.28; font-weight: 800; letter-spacing: -.01em; margin: 0 0 18px; }
.lp-heading-accent {
  background: linear-gradient(100deg, #a78bfa, #6ea8fe 60%, #34d399);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-contrast: more) { .lp-heading-accent { background: none; -webkit-text-fill-color: currentColor; color: inherit; } }
.lp-hero-sub { font-size: 17px; color: var(--muted); max-width: 620px; margin: 0 auto 30px; }
.lp-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.lp-hero-cta .btn { padding: 13px 28px; font-size: 15.5px; }
.lp-hero-cta .btn-primary { box-shadow: 0 16px 32px -8px rgba(124,58,237,.7), 0 0 0 1px rgba(255,255,255,.08) inset; }
/* .btn's base style is a solid white fill, shared with the logged-in
   dashboard — overridden here, scoped to the dark public pages only, so the
   ghost button reads as glass instead of a stray white box. */
.lp-body .btn-ghost { background: rgba(255,255,255,.06); color: var(--ink); backdrop-filter: blur(8px); }
.lp-body .btn-ghost:hover { background: rgba(255,255,255,.1); }

.lp-hero-stats {
  list-style: none; display: flex; gap: 0; justify-content: center; flex-wrap: wrap;
  margin: 0 0 44px; padding: 0;
}
.lp-hero-stats li {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 26px; border-inline-start: 1px solid var(--line);
}
.lp-hero-stats li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.lp-hero-stats strong { font-size: 19px; font-weight: 800; font-family: var(--font-num); color: var(--lp-accent); }
.lp-hero-stats span { font-size: 12px; color: var(--muted); font-weight: 600; }


.lp-section { max-width: 1160px; margin: 0 auto; padding: 70px 26px; }
.lp-section-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.lp-section-head h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px; }
.lp-section-head p { color: var(--muted); font-size: 15.5px; margin: 0; }

.lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-grid-narrow { grid-template-columns: repeat(4, 1fr); }
/* Frosted-glass treatment shared by every card-like surface on the dark
   public pages — a translucent fill (var(--card)) plus blur so the ambient
   background glow behind each card bleeds through instead of being hidden
   by a flat panel. */
.lp-card, .lp-price-card, .lp-compare-table, .lp-guide-item, .lp-usecase {
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.lp-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.lp-card:hover { box-shadow: 0 16px 34px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) inset; transform: translateY(-2px); border-color: rgba(167,139,250,.4); }
.lp-card h3 { font-size: 16px; font-weight: 700; margin: 4px 0 8px; }
.lp-card p { color: var(--muted); font-size: 14px; margin: 0; }

.lp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: #fff; margin-bottom: 6px;
}
.lp-icon svg { width: 21px; height: 21px; }

/* Bento feature grid: the smart-template feature is the product's real
   differentiator, so it gets the large tile instead of being one of eight
   equal boxes — the layout itself argues for what matters most. */
.lp-bento {
  display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, auto);
  grid-template-areas:
    "flag flag wide wide"
    "flag flag c1   c2"
    "c3   c4   c5   c6";
}
.lp-bento .lp-card { height: 100%; display: flex; flex-direction: column; }
.lp-bento-flag { grid-area: flag; background: var(--grad); border: 0; color: #fff; justify-content: center; padding: 30px; }
.lp-bento-flag h3 { font-size: 20px; }
.lp-bento-flag p { color: rgba(255,255,255,.85); font-size: 14.5px; }
.lp-icon-light { background: rgba(255,255,255,.18); }
.lp-bento-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lp-chip {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff;
}
.lp-chip code { font-family: var(--mono); }
.lp-bento-wide { grid-area: wide; }
.lp-bento-c1 { grid-area: c1; }
.lp-bento-c2 { grid-area: c2; }
.lp-bento-c3 { grid-area: c3; }
.lp-bento-c4 { grid-area: c4; }
.lp-bento-c5 { grid-area: c5; }
.lp-bento-c6 { grid-area: c6; }

.lp-how { background: var(--tint); border: 1px solid var(--line); border-radius: 28px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.lp-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative;
}
.lp-steps li { background: transparent; padding: 0 22px; position: relative; }
.lp-steps li + li::before {
  content: ""; position: absolute; top: 17px; inset-inline-start: -1px; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--indigo), var(--blue)); opacity: .28;
}
.lp-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff;
  font-weight: 800; font-family: var(--mono); margin-bottom: 18px; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--tint);
}
.lp-steps h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.lp-steps p { color: var(--muted); font-size: 14px; margin: 0; }

.lp-trust-item { padding: 6px 0; }
.lp-trust-item h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.lp-trust-item p { color: var(--muted); font-size: 13.5px; margin: 0; }

.lp-cta {
  position: relative; overflow: hidden;
  max-width: 1160px; margin: 0 auto 70px; padding: 60px 26px;
  background: var(--grad); border-radius: 28px; text-align: center; color: #fff;
  box-shadow: 0 40px 80px -24px rgba(74,50,232,.5);
}
.lp-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
}
.lp-cta > * { position: relative; }
.lp-cta h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px; }
.lp-cta p { color: rgba(255,255,255,.85); margin: 0 0 26px; font-size: 15.5px; }
.lp-cta .btn-primary { background: #fff; color: var(--indigo); font-size: 15.5px; padding: 13px 30px; }

.lp-footer {
  text-align: center; padding: 30px 26px 40px; color: var(--muted); font-size: 13px;
}
.lp-footer-logo { height: 38px; border-radius: 10px; background: #fff; padding: 6px 14px; margin-bottom: 12px; }

@media (max-width: 980px) {
  .lp-grid, .lp-grid-narrow { grid-template-columns: repeat(2, 1fr); }
  .lp-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "flag flag" "flag flag" "wide wide" "c1 c2" "c3 c4" "c5 c6";
  }
  .lp-steps { grid-template-columns: 1fr; gap: 22px; }
  .lp-steps li { padding: 0; }
  .lp-steps li + li::before { display: none; }
  .lp-hero h1 { font-size: 34px; }
  .lp-hero-stats { gap: 14px 0; }
  .lp-hero-stats li { width: 50%; border-inline-start: 0 !important; padding: 10px 12px !important; }
  .lp-nav-toggle { display: flex; }
  .lp-nav-links {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; inset-inline: 0; top: 100%;
    background: rgba(6, 8, 20, .96); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(0,0,0,.4);
    padding: 10px 26px 16px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .lp-nav-links.is-open { max-height: 320px; opacity: 1; }
  .lp-nav-links a { padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .lp-nav-links a:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .lp-grid, .lp-grid-narrow { grid-template-columns: 1fr; }
  .lp-bento { grid-template-columns: 1fr; grid-template-areas: none; }
  .lp-bento .lp-card { grid-area: auto; }
  .lp-hero { padding: 54px 20px 30px; }
  .lp-hero h1 { font-size: 27px; }
  .lp-section { padding: 50px 20px; }
  .lp-cta { border-radius: 20px; padding: 40px 20px; }
}
/* ---------- Landing hero: scroll progress + SMS-thread visual ---------- */
.lp-scroll-progress {
  position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 60;
  background: rgba(255,255,255,.1); transform-origin: 0 0;
}
.lp-scroll-progress-bar {
  height: 100%; width: 100%; background: var(--grad);
  transform: scaleX(0); transform-origin: inline-start; transition: transform .1s linear;
}

.lp-hero-inner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center;
  max-width: 1040px; margin: 0 auto; text-align: initial;
}
.lp-hero-inner .lp-eyebrow,
.lp-hero-inner h1,
.lp-hero-inner .lp-hero-sub { text-align: center; }
.lp-hero-copy { display: flex; flex-direction: column; align-items: center; }
.lp-hero-copy h1 { margin-inline: auto; }
.lp-hero-visual { display: flex; align-items: center; justify-content: center; min-height: 260px; }

/* Hero visual: a scaled, faithful reproduction of the real logged-in
   dashboard — same nav items/icons as app/views/header.php, same stat
   labels/weekly bar chart/table as public/index.php — in a browser-window
   frame, rather than an invented illustration. Colors inside are hardcoded
   to the dashboard's own (always-light) palette regardless of this page's
   theme, exactly as a real screenshot would be: the window is a truthful
   view into the actual product, not a themed decoration. */
.lp-app-mock {
  width: 480px; max-width: 100%; margin-inline: auto;
  border-radius: 16px; overflow: hidden;
  background: #f7f7fb;
  box-shadow: 0 50px 90px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(-1.2deg);
}
.lp-app-chrome {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: #0b1023;
}
.lp-app-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.lp-app-url {
  margin-inline-start: auto; font-size: 10.5px; color: rgba(255,255,255,.5);
  font-family: var(--font-num); direction: ltr; unicode-bidi: isolate;
}
.lp-app-body { display: flex; min-height: 340px; }
.lp-app-side {
  flex: 0 0 112px; background: #0b1023; color: #cfd4ea;
  padding: 12px 0; display: flex; flex-direction: column; gap: 2px;
}
.lp-app-brand {
  font-size: 12px; font-weight: 800; padding: 0 14px 12px;
  background: linear-gradient(100deg, #a78bfa, #6ea8fe);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-app-nav {
  display: flex; align-items: center; gap: 7px; padding: 7px 14px;
  font-size: 10px; font-weight: 600; color: #cfd4ea;
}
.lp-app-nav span { font-size: 10px; opacity: .9; width: 12px; text-align: center; }
.lp-app-nav.is-active { background: linear-gradient(120deg, #4a32e8, #2e63f6); color: #fff; }
.lp-app-main { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lp-app-topbar { display: flex; align-items: center; justify-content: space-between; }
.lp-app-topbar strong { font-size: 13px; color: #0b1023; }
.lp-app-credit { background: #eef1ff; color: #4a32e8; border-radius: 999px; padding: 3px 10px; font-size: 9.5px; font-weight: 700; }
.lp-app-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp-app-stat {
  background: #fff; border: 1px solid #e6e4f5; border-radius: 9px; padding: 8px 9px;
}
.lp-app-stat span { font-size: 8.5px; color: #666f87; font-weight: 600; display: block; }
.lp-app-stat b { font-size: 14px; font-weight: 800; font-family: var(--font-num); direction: ltr; unicode-bidi: isolate; display: block; margin-top: 2px; color: #0b1023; }
.lp-app-stat.is-accent { background: linear-gradient(120deg, #4a32e8, #2e63f6); }
.lp-app-stat.is-accent span { color: #dfe6ff; }
.lp-app-stat.is-accent b { color: #fff; }
.lp-app-card { background: #fff; border: 1px solid #e6e4f5; border-radius: 9px; padding: 10px 11px; }
.lp-app-card h4 { margin: 0 0 8px; font-size: 10px; font-weight: 700; color: #0b1023; }
.lp-app-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.lp-app-bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.lp-app-bars i { display: block; width: 100%; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #4a32e8, #2e63f6); min-height: 2px; }
.lp-app-bars em { font-style: normal; font-size: 7px; color: #8892b3; margin-top: 3px; }
.lp-app-table { width: 100%; border-collapse: collapse; font-size: 9px; }
.lp-app-table th, .lp-app-table td { text-align: right; padding: 5px 4px; border-bottom: 1px solid #f0f0f7; color: #0b1023; }
.lp-app-table th { color: #8892b3; font-weight: 700; font-size: 8px; }
.lp-app-table td:first-child, .lp-app-table th:first-child { font-family: var(--font-num); direction: ltr; unicode-bidi: isolate; text-align: right; }
.lp-app-badge { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 8px; font-weight: 700; }
.lp-app-badge.is-ok { background: #e7f8ef; color: #157347; }
.lp-app-badge.is-warn { background: #fdf3e3; color: #b45309; }
.lp-app-badge.is-err { background: #fdeaee; color: #c0223a; }

@media (max-width: 900px) {
  .lp-app-mock { width: 420px; transform: rotate(0deg); }
}
@media (max-width: 560px) {
  .lp-app-mock { width: 100%; }
  .lp-app-side { flex-basis: 92px; }
  .lp-app-nav { padding: 7px 8px; font-size: 9px; }
}

.lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.lp-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Landing hero video slider (reuses .lp-slider-full/.lp-slide from
   the image-slider block above — same full-bleed viewport, nav dots/arrows and
   caption, just with a <video> per slide instead of an <img>) ---------- */
.lp-slide video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .5s ease; }
/* Hovering (or holding a finger on) a slide cross-fades its video to the
   poster image with a gentle zoom — a nicer still preview than a plain loop. */
.lp-video-hover-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity .45s ease, transform .5s ease;
  pointer-events: none;
}
.lp-slide:hover video { transform: scale(1.04); filter: brightness(.75); }
.lp-slide:hover .lp-video-hover-image { opacity: 1; transform: scale(1); }
/* Shown instead of the <video> when playback fails and no poster/fallback image was set. */
.lp-slide--placeholder { display: flex; align-items: center; justify-content: center; background: var(--grad); }
.lp-slide--placeholder::before { content: "🎬"; font-size: 42px; opacity: .85; }
.lp-video-mute {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(11,16,35,.55); color: #fff; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.lp-video-mute:hover { background: rgba(11,16,35,.75); }
.lp-slide-caption .btn-primary {
  padding: 9px 22px; font-size: 13.5px; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(74,50,232,.35);
}

@media (max-width: 900px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero-visual { order: -1; min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Contact page ---------- */
.lp-contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 22px; align-items: start; }
.lp-contact-info h3 { font-size: 14px; font-weight: 700; margin: 18px 0 4px; }
.lp-contact-info h3:first-child { margin-top: 0; }
.lp-contact-info p { color: var(--muted); font-size: 14.5px; margin: 0; }
.lp-contact-form form { margin-top: 2px; }

@media (max-width: 900px) {
  .lp-contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Hero slider ---------- */
.lp-slider-full { position: relative; width: 100%; overflow: hidden; background: #0b1023; }
.lp-slider-viewport { position: relative; width: 100%; aspect-ratio: 21 / 7; }
.lp-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.lp-slide.is-active { opacity: 1; visibility: visible; }
.lp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-slide-caption {
  position: absolute; inset-inline: 0; bottom: 0; top: 0;
  display: flex; align-items: flex-end;
  background: linear-gradient(0deg, rgba(11,16,35,.75), rgba(11,16,35,.05) 55%, transparent 75%);
  color: #fff;
}
.lp-slide-caption-inner { max-width: 1160px; margin: 0 auto; width: 100%; padding: 0 26px 34px; text-align: right; }
.lp-slide-caption h3 { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.lp-slide-caption p { font-size: 14.5px; margin: 0 0 14px; color: rgba(255,255,255,.85); max-width: 520px; }
.lp-slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(11,16,35,.45); color: #fff; font-size: 21px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.lp-slider-nav:hover { background: rgba(11,16,35,.65); }
.lp-slider-prev { inset-inline-start: 18px; }
.lp-slider-next { inset-inline-end: 18px; }
.lp-slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.lp-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.lp-dot.is-active { background: #fff; }

@media (max-width: 900px) {
  .lp-slider-viewport { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .lp-slider-viewport { aspect-ratio: 4 / 3; }
  .lp-slide-caption h3 { font-size: 18px; }
  .lp-slide-caption-inner { padding: 0 18px 22px; }
}

/* ---------- Manual-vs-ELLSMS comparison ---------- */
.lp-compare-table { max-width: 880px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.lp-compare-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.lp-compare-row + .lp-compare-row { border-top: 1px solid var(--line); }
.lp-compare-row > div { padding: 16px 18px; font-size: 13.5px; display: flex; align-items: center; }
.lp-compare-row > div:first-child { font-weight: 700; color: var(--ink); }
.lp-compare-head { background: var(--canvas); }
.lp-compare-head > div { font-weight: 700; font-size: 13px; color: var(--muted); }
.lp-compare-head .lp-compare-highlight { color: var(--lp-accent); }
.lp-compare-no { color: var(--muted); }
.lp-compare-no::before { content: "–"; margin-inline-end: 8px; color: #c7cbe0; font-weight: 800; }
.lp-compare-yes { color: var(--ink); font-weight: 600; }
.lp-compare-yes::before { content: "✓"; margin-inline-end: 8px; color: var(--ok); font-weight: 800; }
.lp-compare-row:not(.lp-compare-head) .lp-compare-highlight,
.lp-compare-row:not(.lp-compare-head) > div:nth-child(3) { background: var(--ok-bg); }

@media (max-width: 700px) {
  .lp-compare-row { grid-template-columns: 1fr; }
  .lp-compare-row > div:first-child { background: var(--canvas); font-size: 12.5px; padding-bottom: 8px; }
  .lp-compare-head > div:not(:first-child) { padding-bottom: 4px; }
  .lp-compare-row:not(.lp-compare-head) > div:nth-child(2),
  .lp-compare-row:not(.lp-compare-head) > div:nth-child(3) { padding-top: 4px; }
}

/* ---------- Use cases ---------- */
.lp-usecase {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.lp-usecase:hover { box-shadow: 0 16px 34px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) inset; transform: translateY(-2px); border-color: rgba(167,139,250,.4); }
.lp-usecase h3 { font-size: 15.5px; font-weight: 700; margin: 4px 0 8px; }
.lp-usecase p { color: var(--muted); font-size: 13.5px; margin: 0; }
.lp-icon-tint-a { background: linear-gradient(135deg, #4a32e8, #7c3aed); }
.lp-icon-tint-b { background: linear-gradient(135deg, #2e63f6, #06b6d4); }
.lp-icon-tint-c { background: linear-gradient(135deg, #157347, #22c55e); }
.lp-icon-tint-d { background: linear-gradient(135deg, #b45309, #f59e0b); }
.lp-icon-tint-e { background: linear-gradient(135deg, #be185d, #ec4899); }
.lp-icon-tint-f { background: linear-gradient(135deg, #0f766e, #14b8a6); }

/* ---------- Trust icons ---------- */
.lp-trust-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; background: var(--tint); color: var(--lp-accent);
  margin-bottom: 10px;
}
.lp-trust-icon svg { width: 17px; height: 17px; }

/* ---------- Pricing ---------- */
.lp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.lp-price-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.lp-price-card.is-featured { border-color: var(--lp-accent); box-shadow: 0 20px 50px rgba(124,58,237,.35); }
.lp-price-badge {
  position: absolute; top: -12px; right: 22px; background: var(--grad); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px;
}
.lp-price-card h3 { font-size: 17px; font-weight: 700; margin: 4px 0 0; }
.lp-price-amount { font-size: 26px; font-weight: 800; font-family: var(--mono); direction: ltr; unicode-bidi: isolate; text-align: right; }
.lp-price-amount span { font-size: 13px; font-weight: 600; color: var(--muted); font-family: var(--font); margin-inline-start: 4px; }
.lp-price-credit { color: var(--muted); font-size: 13.5px; margin-top: -8px; }
.lp-price-features { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lp-price-features li { font-size: 13.5px; color: var(--ink); padding-inline-start: 26px; position: relative; }
.lp-price-features li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: -1px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 900px) { .lp-pricing-grid { grid-template-columns: 1fr; } }

/* ---------- Guide (public accordion) ---------- */
.lp-guide-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lp-guide-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; }
.lp-guide-item summary {
  padding: 16px 0; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.lp-guide-item summary::-webkit-details-marker { display: none; }
.lp-guide-item summary::after { content: "+"; font-size: 20px; color: var(--lp-accent); font-weight: 400; }
.lp-guide-item[open] summary::after { content: "−"; }
.lp-guide-body { padding: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.9; }

/* ---------- Financial commerce (FIN-11) — print-friendly invoice ---------- */
@media print {
  .topbar, .sidebar, .flash, .toolbar form, button, .btn { display: none !important; }
  .print-invoice { border: none !important; box-shadow: none !important; }
  body { background: #fff !important; }
}