/* Liquid Pearls theme for oCMS. Tokens and component values copied from the customer SPA
   (frontend/src/styles/jiade-theme.css, frontend/src/index.css, frontend/docs/theme.md). */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700.woff2') format('woff2'); }

:root {
  --font-family-base: Poppins, ui-sans-serif, system-ui, sans-serif;
  --primary: #3736af; --secondary: #3693ff; --success: #3ab67a; --info: #00ada3; --warning: #ffab2d; --danger: #fd5353;
  --title: #424562; --text-dark: #312a2a; --text: #65686c; --body-bg: #e7e7e7; --card: #ffffff; --light: #f3f3f3; --border: #d5d9e2;
  --rgba-primary-1: rgba(55, 54, 175, 0.1); --rgba-primary-5: rgba(55, 54, 175, 0.5);
  --primary-hover: #2b2a88; --primary-solid: #3736af;
  --success-text: #25734d; --danger-text: #b03a3a; --warning-text: #8c5e19; --input-border: #898c92;
  --shadow-lg: 0 0 2.5rem rgba(82, 63, 105, 0.1);
  color-scheme: light;
}
[data-theme-version='dark'] {
  --title: #f4f3ee; --text-dark: #f4f3ee; --text: #b5b3aa; --body-bg: #1a1a19; --card: #242423; --light: #2e2e2c; --border: #3a3937;
  --secondary: #b392f0; --primary: #6ea8f0; --primary-hover: #3776c6; --primary-solid: #2f6cc0;
  --rgba-primary-1: rgba(110, 168, 240, 0.1); --rgba-primary-5: rgba(110, 168, 240, 0.5);
  --success-text: #5cc28f; --danger-text: #f18681; --warning-text: #e8a23b; --input-border: #7a7872;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lp-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--body-bg); color: var(--text); font-family: var(--font-family-base); font-size: 1rem; line-height: 1.5; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { color: var(--title); margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-muted { color: var(--text); font-size: 0.875rem; }
.lp-link { font-size: 0.875rem; font-weight: 500; }

/* ---- Header (SPA GuestShell) ---- */
.lp-header { background: var(--card); border-bottom: 1px solid var(--border); }
.lp-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.875rem; }
.lp-brand { display: flex; align-items: center; gap: 0.75rem; }
.lp-brand__tagline { display: block; font-size: 0.65rem; font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); }
.lp-brand__name { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.75rem; color: var(--title); }
.lp-nav { display: flex; align-items: center; gap: 1.25rem; }
.lp-nav__link { padding-bottom: 0.25rem; border-bottom: 2px solid transparent; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: var(--text); }
.lp-nav__link:hover { color: var(--title); }
.lp-nav__link.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.lp-header__actions { display: flex; align-items: center; gap: 0.5rem; }

.lp-glyph { display: inline-block; width: 0.75rem; height: 0.75rem; flex-shrink: 0; border-radius: 9999px; vertical-align: middle;
  background-image: linear-gradient(to bottom right, #fbbf24, #fef08a); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.lp-glyph--lg { width: 2rem; height: 2rem; }

.lp-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 9999px;
  background: var(--light); color: var(--title); cursor: pointer; transition: all 0.15s ease-in-out; }
.lp-icon-box:hover { background: var(--rgba-primary-1); color: var(--primary); }
.lp-icon-sun { display: none; }
[data-theme-version='dark'] .lp-icon-sun { display: block; }
[data-theme-version='dark'] .lp-icon-moon { display: none; }

.lp-search { position: relative; }
.lp-search__icon { position: absolute; inset-inline-start: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text); pointer-events: none; }
.lp-search .lp-search__input { width: 13rem; padding-inline-start: 2.25rem; }
.lp-search--wide { width: 100%; max-width: 28rem; }
.lp-search--wide .lp-search__input { width: 100%; }

/* ---- Buttons / inputs / badges (SPA .lp-btn, .lp-input, .lp-badge) ---- */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.59375rem 1.5rem; border: 1px solid transparent; border-radius: 0.5rem;
  font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: all 0.15s ease-in-out; }
.lp-btn-primary { background: var(--primary-solid); border-color: var(--primary-solid); color: #fff; }
.lp-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.lp-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 0.25rem var(--rgba-primary-5); }
.lp-btn-secondary { background: transparent; border-color: var(--border); color: var(--title); }
.lp-btn-secondary:hover { background: var(--light); }
.lp-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: 0.375rem; gap: 0.375rem; }
.lp-input { width: 100%; height: 2.75rem; padding: 0 0.9375rem; color: var(--text); background: var(--card); border: 1px solid var(--input-border); border-radius: 0.5rem;
  font: inherit; font-size: 0.9rem; line-height: 1.7; transition: border-color 0.15s, box-shadow 0.15s; }
.lp-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 0.25rem var(--rgba-primary-5); }
.lp-badge { display: inline-flex; align-items: center; line-height: 1.2; border-radius: 0.325rem; font-weight: 600; font-size: 0.75rem; padding: 0.25rem 0.625rem; }
.lp-up { color: var(--success-text); } .lp-down { color: var(--danger-text); }

/* ---- Layout ---- */
.lp-main { flex: 1; width: 100%; padding: 1.5rem 1.875rem; outline: none; }
.lp-page--narrow { max-width: 40rem; margin: 3rem auto; }
.lp-center { text-align: center; display: grid; gap: 0.75rem; justify-items: center; }
.lp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.25rem; align-items: start; }
.lp-col-main, .lp-col-side { display: grid; gap: 1.25rem; min-width: 0; }
.lp-page-title { margin-bottom: 1.25rem; }
.lp-eyebrow { font-size: 0.75rem; font-weight: 600; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); }
.lp-h1 { font-size: 2.25rem; font-weight: 700; line-height: 2.5rem; margin-top: 0.25rem; }
.lp-lead { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text); }

/* ---- Cards (SPA .lp-card) ---- */
.lp-card { background: var(--card); border-radius: 0.5rem; box-shadow: 0 0.3125rem 0.3125rem 0 rgba(82, 63, 105, 0.05); color: var(--title); }
.lp-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.875rem 1.25rem; border-bottom: 1px solid var(--border); }
.lp-card-title { font-size: 1.25rem; font-weight: 500; text-transform: capitalize; color: var(--title); }
.lp-card-body { padding: 1.5rem 1.875rem; }
.lp-card-header + .lp-card-body { padding-top: 1.25rem; }
.lp-prose { color: var(--text); font-size: 0.875rem; line-height: 1.7; }
.lp-prose p + p { margin-top: 0.75rem; }

/* CTA card (SPA Explore sidebar) */
.lp-cta__title { font-size: 1rem; font-weight: 600; color: var(--title); }
.lp-cta__text { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--text); }
.lp-cta__actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* Company rows (SPA list rows: initials avatar, name, action) */
.lp-company-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.lp-company-card { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid var(--border); box-shadow: none; transition: background 0.15s; }
.lp-company-card:hover { background: var(--light); }
.lp-company-card__text { min-width: 0; flex: 1; }
.lp-company-card__name { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--title); }
.lp-company-card__excerpt { display: block; font-size: 0.8125rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px;
  background: var(--light); color: var(--title); font-size: 0.75rem; font-weight: 600; }
.lp-avatar--lg { width: 2.75rem; height: 2.75rem; }

/* ---- Company profile (mirrors the SPA coin page) ---- */
.lp-coin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lp-coin-head__id { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.lp-coin-head__name { font-size: 1.125rem; font-weight: 600; color: var(--title); }
.lp-coin-head__name small { font-size: 1rem; font-weight: 400; color: var(--text); }
.lp-coin-head__price { display: flex; align-items: center; gap: 0.375rem; font-size: 1.5rem; font-weight: 700; color: var(--title); font-variant-numeric: tabular-nums; }
.lp-coin-head__price .lp-glyph { width: 0.875rem; height: 0.875rem; }
.lp-coin-head__chg { font-size: 0.8125rem; font-weight: 500; margin-inline-start: 0.375rem; }

.lp-tabs { display: flex; gap: 0.25rem; }
.lp-tab { padding: 0.25rem 0.5rem; border: 0; border-radius: 0.375rem; background: var(--light); color: var(--text); font: inherit; font-size: 0.6875rem; font-weight: 600; cursor: pointer; }
.lp-tab:hover { color: var(--primary); }
.lp-tab.is-active { background: var(--rgba-primary-1); color: var(--primary); }

.lp-chart { position: relative; min-height: 260px; }
.lp-chart--tall { min-height: 320px; }

.lp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.lp-kv dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.lp-kv dd { margin: 0.125rem 0 0; display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--title); font-variant-numeric: tabular-nums; }

.lp-perf { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.lp-perf td { padding: 0.5rem 0; border-top: 1px solid var(--border); color: var(--text); }
.lp-perf tr:first-child td { border-top: 0; }
.lp-perf td:last-child { text-align: end; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Gradient KPI tiles (SPA ValueCard tones) */
.lp-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.lp-value { position: relative; overflow: hidden; border-radius: 0.5rem; padding: 1.25rem; color: #fff; box-shadow: 0 5px 5px rgba(82, 63, 105, 0.05); }
.lp-value--primary { background: linear-gradient(to bottom right, #2c77cf, #1f6ad1); }
.lp-value--secondary { background: linear-gradient(to bottom right, #ac4cbc, #8a35a5); }
.lp-value--warning { background: linear-gradient(to bottom right, #ffab2d, #f2930d); color: #312a2a; }
.lp-value--neutral { background: linear-gradient(to bottom right, #707686, #6c7488); }
.lp-value__num { display: flex; align-items: center; gap: 0.375rem; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-value__label { margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 500; }

/* Scroll reveal */
.lp-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.lp-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lp-reveal { opacity: 1; transform: none; transition: none; } }

/* ApexCharts: theme font + tooltip surface */
.apexcharts-canvas text { font-family: var(--font-family-base) !important; }
.apexcharts-tooltip { font-family: var(--font-family-base) !important; }


/* Pagination (oCMS partial) */
.st-pagination__list { display: flex; gap: 0.375rem; list-style: none; padding: 0; margin: 1.25rem 0 0; justify-content: center; }
.st-pagination__list a, .st-pagination__list span { display: inline-flex; min-width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 0.375rem;
  background: var(--card); color: var(--title); font-size: 0.8125rem; }

@media (max-width: 1100px) { .lp-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .lp-header__inner, .lp-main, .lp-footer { padding-inline: 1rem; }
  .lp-nav { display: none; }
  .lp-search__input { width: 9rem; }
  .lp-card-header, .lp-card-body { padding-inline: 1rem; }
  .lp-h1 { font-size: 1.75rem; line-height: 2.125rem; }
}
@media (max-width: 520px) { .lp-brand__text, .lp-search { display: none; } }

/* ==== Public site (landing, explorer, company profile) ==== */
.lp-wrap { width: 100%; max-width: 80rem; margin-inline: auto; }
.lp-main:has(.lp-hero) { padding: 0; }
.lp-flat { color: var(--text); }
.lp-h2 { font-size: 1.75rem; font-weight: 700; line-height: 2.25rem; }
.lp-center-text { text-align: center; }
.lp-btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; border-radius: 0.625rem; }
.lp-btn-block { width: 100%; }
.lp-btn-light { background: #fff; color: #2b2a88; border-color: #fff; }
.lp-btn-light:hover { background: #eceafd; }
.lp-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.lp-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Hero */
.lp-hero { background: radial-gradient(60rem 30rem at 85% 10%, var(--rgba-primary-1), transparent 70%), var(--card); border-bottom: 1px solid var(--border); }
.lp-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 5rem 1.875rem 4.5rem; }
.lp-hero__title { margin-top: 0.75rem; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--title); }
.lp-hero__text { margin-top: 1.25rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--text); }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.lp-hero__stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2.5rem 0 0; }
.lp-hero__stats dt { font-size: 0.75rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
.lp-hero__stats dd { margin: 0.25rem 0 0; display: flex; align-items: center; gap: 0.375rem; font-size: 1.5rem; font-weight: 700; color: var(--title); font-variant-numeric: tabular-nums; }
.lp-hero__copy > * { animation: lp-rise 0.7s ease both; }
.lp-hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.lp-hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.lp-hero__copy > :nth-child(4) { animation-delay: 0.24s; }
.lp-hero__copy > :nth-child(5) { animation-delay: 0.32s; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.lp-hero__art { position: relative; min-height: 24rem; }
.lp-hero__art::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 2rem; background: linear-gradient(135deg, #3736af, #3693ff 55%, #00ada3); opacity: 0.92; transform: rotate(-4deg); box-shadow: var(--shadow-lg); }
.lp-live-pill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--card); color: var(--title); font-size: 0.75rem; font-weight: 600; box-shadow: var(--shadow-lg); }
.lp-live-pill--sm { padding: 0.15rem 0.5rem; font-size: 0.6875rem; box-shadow: none; background: var(--light); }
.lp-live-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); animation: lp-pulse 1.8s infinite; }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgba(58, 182, 122, 0.55); } 70% { box-shadow: 0 0 0 0.5rem rgba(58, 182, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 182, 122, 0); } }
.lp-float { position: absolute; z-index: 1; width: min(19rem, 80%); display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: center; padding: 1rem 1.125rem; border: 1px solid var(--border); box-shadow: var(--shadow-lg); color: var(--title); animation: lp-bob 6s ease-in-out infinite; }
.lp-float:hover { animation-play-state: paused; border-color: var(--primary); }
.lp-float--0 { top: 12%; left: 4%; }
.lp-float--1 { top: 40%; right: 2%; animation-delay: -2s; }
.lp-float--2 { bottom: 6%; left: 14%; animation-delay: -4s; }
.lp-float__id { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.lp-float__id b, .lp-co__text b { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-float__id small, .lp-co__text small { display: block; font-size: 0.75rem; color: var(--text); }
.lp-float__price { display: flex; align-items: center; gap: 0.25rem; justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-float__chg { grid-column: 2; justify-self: end; font-size: 0.8125rem; font-weight: 500; }
.lp-float .lp-spark, .lp-float .lp-spark--empty { grid-column: 1 / -1; width: 100%; height: 2.25rem; }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .lp-float, .lp-live-dot, .lp-hero__copy > * { animation: none; } }

/* Sections */
.lp-section { padding: 4rem 1.875rem; }
.lp-section--alt { background: var(--card); border-block: 1px solid var(--border); }
.lp-section__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.lp-feature { padding: 1.75rem; border-radius: 0.75rem; background: var(--body-bg); }
.lp-feature h3 { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; }
.lp-feature p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; }
.lp-feature__icon { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 0.75rem; background: var(--rgba-primary-1); color: var(--primary); font-weight: 700; }
.lp-spotlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; }
.lp-spotlight { display: grid; gap: 0.625rem; align-content: start; justify-items: start; padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; }
.lp-spotlight:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lp-spotlight__name { font-size: 1.0625rem; font-weight: 600; color: var(--title); }
.lp-spotlight__text { font-size: 0.875rem; color: var(--text); line-height: 1.55; }
.lp-cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 3rem; border-radius: 1.25rem; background: linear-gradient(120deg, #2b2a88, #3736af 45%, #3693ff); color: #fff; }
.lp-cta-band h2 { color: #fff; font-size: 2rem; font-weight: 700; line-height: 1.2; max-width: 30rem; }
.lp-cta-band .lp-hero__actions { margin-top: 0; }

/* Summary tiles (explorer) */
.lp-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.lp-summary__tile { padding: 1.125rem 1.375rem; display: grid; gap: 0.25rem; }
.lp-summary__tile span { font-size: 0.75rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-summary__tile strong { display: flex; align-items: center; gap: 0.375rem; font-size: 1.375rem; color: var(--title); font-variant-numeric: tabular-nums; }

/* Explorer table */
.lp-table__head { flex-wrap: wrap; padding-block: 1rem; }
.lp-tabs--pill { flex-wrap: wrap; gap: 0.375rem; }
.lp-tabs--pill .lp-tab { padding: 0.4rem 0.875rem; border-radius: 999px; font-size: 0.8125rem; }
.lp-search--table .lp-search__input { width: 16rem; padding-inline-start: 0.9375rem; }
.lp-table-wrap { position: relative; overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.lp-table th { padding: 0.75rem 1rem; text-align: start; font-size: 0.75rem; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap; }
.lp-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); color: var(--title); vertical-align: middle; white-space: nowrap; }
.lp-table th:first-child, .lp-table td:first-child { padding-inline-start: 1.875rem; }
.lp-table th:last-child, .lp-table td:last-child { padding-inline-end: 1.875rem; }
.lp-table tbody tr { transition: background 0.15s; }
.lp-table tbody tr:hover { background: var(--light); }
.lp-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.lp-table td.num { font-weight: 500; }
.lp-table td.num .lp-glyph { margin-inline-start: 0.125rem; }
.lp-table__msg { text-align: center !important; color: var(--text) !important; padding: 2.5rem !important; }
.lp-table__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.875rem; font-size: 0.75rem; color: var(--text); }
.lp-co { display: flex; align-items: center; gap: 0.75rem; min-width: 0; color: inherit; }
.lp-co:hover b { color: var(--primary); }
.lp-avatar--img { object-fit: cover; background: var(--light); }
.lp-spark { display: block; width: 7.5rem; height: 2.25rem; }
.lp-spark polyline { stroke: var(--text); }
.lp-spark--up polyline { stroke: var(--success); }
.lp-spark--down polyline { stroke: var(--danger); }
.lp-spark--empty { display: block; border-bottom: 2px dashed var(--border); height: 1.25rem; width: 7.5rem; }
.lp-flash-up { animation: lp-flash-up 1.2s ease; }
.lp-flash-down { animation: lp-flash-down 1.2s ease; }
@keyframes lp-flash-up { from { background: rgba(58, 182, 122, 0.25); } to { background: transparent; } }
@keyframes lp-flash-down { from { background: rgba(253, 83, 83, 0.25); } to { background: transparent; } }

/* Company profile */
.lp-page--company { padding-top: 0.5rem; }
.lp-coin-head__actions { display: flex; gap: 0.5rem; }
.lp-coin-head__price { font-size: 2rem; }
.lp-layout--company { margin-top: 1.5rem; }
.lp-kv--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-chart__empty { display: grid; place-items: center; min-height: 300px; color: var(--text); font-size: 0.875rem; }
.lp-buy__label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--title); margin-bottom: 0.375rem; }
.lp-buy__field { position: relative; }
.lp-buy__field .lp-input { height: 3.25rem; font-size: 1.25rem; padding-inline-end: 2.5rem; font-variant-numeric: tabular-nums; }
.lp-buy__field .lp-glyph { position: absolute; inset-inline-end: 0.9375rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; }
.lp-buy__est { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-height: 2.5rem; margin: 0.75rem 0; font-size: 0.8125rem; color: var(--text); }
.lp-buy__note { margin-top: 0.75rem; font-size: 0.75rem; }
.lp-trades { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.lp-trades th { text-align: start; font-weight: 500; font-size: 0.6875rem; text-transform: uppercase; color: var(--text); padding-bottom: 0.5rem; }
.lp-trades td { padding: 0.45rem 0; border-top: 1px solid var(--border); color: var(--title); font-variant-numeric: tabular-nums; }
.lp-trades .num { text-align: end; }
.lp-kv code { font-size: 0.8125rem; }
/* A figure inside a key/value pair: lp-market.js wraps numbers so only they read left to right. */
.lp-kv .lp-ltr { display: inline-flex; align-items: center; gap: 0.25rem; }
.lp-page--article { max-width: 52rem; }

/* Footer */
.lp-footer { border-top: 1px solid var(--border); background: var(--card); padding: 3rem 1.875rem 1.5rem; font-size: 0.875rem; color: var(--text); }
.lp-footer__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
.lp-footer__brand { display: flex; align-items: center; gap: 0.75rem; align-self: start; }
.lp-footer nav { display: grid; gap: 0.5rem; align-content: start; }
.lp-footer h3 { font-size: 0.8125rem; font-weight: 600; color: var(--title); margin-bottom: 0.25rem; }
.lp-footer nav a { color: var(--text); }
.lp-footer nav a:hover { color: var(--primary); }
.lp-footer__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.8125rem; }

@media (max-width: 1100px) {
  .lp-hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: 3rem; }
  .lp-hero__art { min-height: 22rem; }
  .lp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-kv--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-hide-md { display: none; }
}
@media (max-width: 760px) {
  .lp-section { padding: 2.5rem 1rem; }
  .lp-hero__inner { padding: 2.5rem 1rem; }
  .lp-features, .lp-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .lp-section__head { flex-direction: column; align-items: start; }
  .lp-hide-sm { display: none; }
  .lp-table th:first-child, .lp-table td:first-child { padding-inline-start: 1rem; }
  .lp-table th:last-child, .lp-table td:last-child { padding-inline-end: 1rem; }
  .lp-table__foot { padding-inline: 1rem; }
  .lp-search--table, .lp-search--table .lp-search__input { width: 100%; }
  .lp-cta-band { padding: 2rem 1.5rem; }
  .lp-cta-band h2 { font-size: 1.5rem; }
  .lp-coin-head { flex-wrap: wrap; }
  .lp-coin-head__price { font-size: 1.5rem; }
  .lp-footer { padding-inline: 1rem; }
}
@media (max-width: 520px) {
  .lp-hide-xs { display: none; }
  .lp-summary { grid-template-columns: minmax(0, 1fr); }
  .lp-float { width: 88%; }
  .lp-float--0, .lp-float--2 { left: 0; }
}

/* ==== Company page: education first (left / top), market data beside it ==== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lp-page--company [id] { scroll-margin-top: 4.5rem; }
.lp-asset-head { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  margin: -0.5rem -1.875rem 1.25rem; padding: 0.875rem 1.875rem; background: var(--body-bg); border-bottom: 1px solid var(--border); }
.lp-asset-head__title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.lp-asset-head__h { font-size: 1.375rem; font-weight: 700; }
.lp-asset-head__h small { font-size: 1rem; font-weight: 500; color: var(--text); }
.lp-asset-nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.lp-asset-nav a { padding: 0.4rem 0.875rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.lp-asset-nav a:hover { color: var(--title); background: var(--light); }
.lp-asset-nav a.is-active { background: var(--title); color: var(--card); }

.lp-asset { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.lp-asset__edu, .lp-asset__data { display: grid; gap: 1.25rem; min-width: 0; }


.lp-about__h { font-size: 1.25rem; font-weight: 700; }
.lp-about__text { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--title); }
.lp-about__text p + p { margin-top: 0.625rem; }
.lp-facts { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.375rem; font-size: 0.8125rem; color: var(--text); }
.lp-facts li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px dashed var(--border); }
.lp-facts b, .lp-facts strong { color: var(--title); font-weight: 500; }
.lp-about__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.25rem; }
.lp-chip { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--light); color: var(--title); font-size: 0.75rem; font-weight: 500; }
.lp-chip:hover { background: var(--rgba-primary-1); color: var(--primary); }
.lp-about__signin { margin-top: 0.75rem; text-align: center; }
.lp-now { background: linear-gradient(160deg, var(--rgba-primary-1), transparent 60%), var(--card); }
.lp-now__h { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; }
.lp-now p { margin: 0.5rem 0 0.75rem; font-size: 0.875rem; color: var(--title); line-height: 1.55; }
.lp-learn__h { font-size: 1rem; font-weight: 600; }
.lp-learn__list { margin: 0.75rem 0 1rem; display: grid; gap: 0.75rem; }
.lp-learn__list dt { font-size: 0.8125rem; font-weight: 600; color: var(--title); }
.lp-learn__list dd { margin: 0.125rem 0 0; font-size: 0.8125rem; line-height: 1.55; }

.lp-pricebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.lp-pricebar__price { display: flex; align-items: center; gap: 0.5rem; font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--title); font-variant-numeric: tabular-nums; }
.lp-pricebar__price .lp-glyph { width: 1.125rem; height: 1.125rem; }
.lp-pricebar__chg { margin-top: 0.25rem; font-size: 0.875rem; font-weight: 500; }
.lp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.lp-tile { padding: 1.25rem 1.375rem; }
.lp-tile__h { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.lp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.lp-kv--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lp-faq { display: grid; gap: 0; padding-top: 0.5rem !important; }
.lp-faq details { border-bottom: 1px solid var(--border); }
.lp-faq details:last-child { border-bottom: 0; }
.lp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 500; color: var(--title); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--text); transition: transform 0.2s; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details > :not(summary) { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--text); }

.lp-more { display: grid; gap: 1.25rem; }
.lp-more:empty { display: none; }
.lp-more__h { font-size: 1.375rem; margin-top: 0.5rem; }
.lp-reg__h { margin: 1.5rem 0 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.lp-docs { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--text); }
.lp-reg__note { margin-top: 1rem; font-size: 0.75rem; }

.lp-calc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.75rem; }
.lp-calc label > span:first-child { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 500; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-calc .lp-input { height: 3rem; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.lp-calc__eq { padding-bottom: 0.75rem; font-size: 1.25rem; color: var(--text); }
.lp-calc__field { position: relative; display: block; }
.lp-calc__field .lp-input { padding-inline-end: 2.5rem; }
.lp-calc__field .lp-glyph { position: absolute; inset-inline-end: 0.9375rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; }
.lp-calc__note { margin-top: 0.75rem; font-size: 0.75rem; }

.lp-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.lp-related__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; color: var(--title); transition: background 0.15s; }
.lp-related__item:hover { background: var(--light); }
.lp-related__item .lp-co__text { flex: 1; min-width: 0; }
.lp-related__px { display: grid; justify-items: end; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-related__px small { font-size: 0.75rem; font-weight: 500; }
.lp-legal { font-size: 0.75rem; color: var(--text); line-height: 1.6; padding: 0 0.25rem; }

@media (max-width: 1200px) { .lp-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .lp-asset { grid-template-columns: minmax(0, 1fr); }
  .lp-asset__edu { position: static; }
  .lp-two, .lp-kv--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lp-asset-head { margin-inline: -1rem; padding-inline: 1rem; }
  .lp-asset-head__h { font-size: 1.125rem; }
  .lp-tiles, .lp-related { grid-template-columns: minmax(0, 1fr); }
  .lp-pricebar__price { font-size: 1.75rem; }
  .lp-calc { grid-template-columns: minmax(0, 1fr); }
  .lp-calc__eq { display: none; }
}
.lp-page--company .lp-card-title { text-transform: none; }

/* Company page before its first trade, and the editor's "The business" block */
.lp-company__loading { padding: 2rem 0; }
.lp-badge--pending { background: var(--rgba-primary-1); color: var(--primary); white-space: nowrap; }
.lp-await__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.lp-await__tile { display: grid; gap: 0.25rem; padding: 1rem 1.125rem; border-radius: 0.5rem; background: var(--light); }
.lp-await__tile span { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); }
.lp-await__tile strong { display: flex; align-items: center; gap: 0.375rem; font-size: 1.375rem; font-weight: 700; color: var(--title); font-variant-numeric: tabular-nums; }
.lp-await__tile small { font-size: 0.75rem; color: var(--text); }
.lp-biz__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lp-biz__card { padding: 1.125rem 1.25rem; border: 1px solid var(--border); border-radius: 0.5rem; }
.lp-biz__h { margin-bottom: 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.lp-biz__traction { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.lp-biz__plans { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.375rem; font-size: 0.875rem; line-height: 1.6; color: var(--text); }
.lp-biz__note { margin-top: 1.25rem; font-size: 0.75rem; }
@media (max-width: 760px) {
  .lp-await__tiles, .lp-biz__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ==== Landing pages (How it works, List your company): bodies marked data-lp-landing ==== */
.lp-landing { display: grid; gap: 0; }
.lp-lhero { padding: 3.5rem 0 2.5rem; max-width: 46rem; }
.lp-lhero__title { margin-top: 0.75rem; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--title); }
.lp-lhero__text { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--text); }
.lp-lhero__note { margin-top: 0.75rem; font-size: 0.8125rem; }
.lp-lsec { padding: 2rem 0; }
.lp-lsec > .lp-h2 { margin-bottom: 1.25rem; }
.lp-lsec > .lp-lead { margin: -0.75rem 0 1.25rem; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.lp-step { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lp-step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.lp-step__num { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary-solid); color: #fff; font-size: 0.875rem; font-weight: 700; }
.lp-step h3, .lp-lcard h3 { font-size: 1.0625rem; font-weight: 600; }
.lp-step p, .lp-lcard p { font-size: 0.875rem; line-height: 1.6; color: var(--text); }
.lp-step .lp-step__need { margin-top: auto; padding-top: 0.625rem; border-top: 1px dashed var(--border); font-size: 0.8125rem; }
.lp-lcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.lp-lcard { padding: 1.5rem; display: grid; gap: 0.625rem; align-content: start; }
.lp-lcard__h { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
.lp-ltwo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.lp-ltwo p { font-size: 0.9375rem; line-height: 1.6; color: var(--text); }
.lp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; color: var(--title); }
.lp-checklist li { display: flex; gap: 0.625rem; align-items: baseline; }
.lp-checklist li::before { content: "✓"; color: var(--success-text); font-weight: 700; }
/* Icons: same-origin SVG masks, coloured by currentColor (page bodies may not carry inline SVG). */
.lp-ico { display: inline-block; width: 1.75rem; height: 1.75rem; color: var(--primary); background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.lp-ico--user { --ico: url('../icons/user.svg'); }
.lp-ico--users { --ico: url('../icons/users.svg'); }
.lp-ico--bank { --ico: url('../icons/bank.svg'); }
.lp-ico--chart { --ico: url('../icons/chart.svg'); }
.lp-ico--cash { --ico: url('../icons/cash.svg'); }
.lp-ico--units { --ico: url('../icons/units.svg'); }
.lp-ico--coin { --ico: url('../icons/coin.svg'); }
.lp-ico--book { --ico: url('../icons/book.svg'); }
.lp-ico--file { --ico: url('../icons/file.svg'); }
.lp-ico--check { --ico: url('../icons/check.svg'); }
.lp-ico--search { --ico: url('../icons/search.svg'); }
.lp-ico--rocket { --ico: url('../icons/rocket.svg'); }
@media (max-width: 1100px) { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .lp-lhero { padding: 2rem 0 1.5rem; }
  .lp-steps, .lp-lcards, .lp-ltwo { grid-template-columns: minmax(0, 1fr); }
}

/* Header: signed-in swap (lp.signedin cookie sets data-lp-signedin on <html>) and the phone menu */
.lp-header { position: relative; z-index: 20; }
.lp-member, .lp-menu-btn { display: none !important; }
[data-lp-signedin] .lp-guest { display: none !important; }
[data-lp-signedin] .lp-member { display: inline-flex !important; }
.lp-menu { position: absolute; inset-inline: 0; top: 100%; display: grid; gap: 1rem; padding: 1rem; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.lp-menu[hidden] { display: none; }
.lp-menu__nav { display: grid; }
.lp-menu__link { padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--border); font-size: 1rem; font-weight: 500; color: var(--title); }
.lp-menu__link.is-active { color: var(--primary); }
.lp-menu__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lp-menu__actions .lp-btn { flex: 1; }
.lp-menu__search .lp-input { width: 100%; }
/* The header's own search shows from 521px up. */
@media (min-width: 521px) { .lp-menu__search { display: none; } }
@media (max-width: 760px) {
  .lp-menu-btn { display: inline-flex !important; }
  /* Pinned on phones so the menu button is always in reach; lp-blocks.js sets --lp-header-h. */
  .lp-header { position: sticky; top: 0; }
  .lp-menu { max-height: calc(100dvh - var(--lp-header-h, 4.5rem)); overflow-y: auto; }
  .lp-asset-head { top: var(--lp-header-h, 4.5rem); }
  .lp-page--company [id] { scroll-margin-top: calc(var(--lp-header-h, 4.5rem) + 4.5rem); }
}
@media (min-width: 761px) { .lp-menu { display: none; } }

/* ==== Right-to-left (Arabic): oCMS sets dir="rtl" on <html> ==== */
/* Prices, tickers and figures read left to right inside the RTL layout. */
[dir='rtl'] :is(.num, .lp-ltr, .lp-pricebar__price, .lp-pricebar__chg, .lp-await__tile strong, .lp-float__price, .lp-float__chg,
  .lp-related__px, .lp-summary__tile strong, .lp-hero__stats dd, .lp-calc .lp-input, .lp-asset-head__h small,
  .lp-co__text small, .lp-float__id small) { direction: ltr; unicode-bidi: isolate; }
[dir='rtl'] :is(.lp-pricebar__price, .lp-await__tile strong, .lp-summary__tile strong, .lp-hero__stats dd) { justify-content: flex-end; }
[dir='rtl'] :is(.lp-table td.num, .lp-trades td.num, .lp-table th.num, .lp-trades th.num) { text-align: left; }
[dir='rtl'] .lp-float__price, [dir='rtl'] .lp-float__chg { justify-self: start; }
[dir='rtl'] .lp-related__px { justify-items: start; }
[dir='rtl'] .lp-co__text small, [dir='rtl'] .lp-float__id small { text-align: right; }
[dir='rtl'] .lp-hero__art::before { transform: rotate(4deg); }
[dir='rtl'] .lp-float--0 { left: auto; right: 4%; }
[dir='rtl'] .lp-float--1 { right: auto; left: 2%; }
[dir='rtl'] .lp-float--2 { left: auto; right: 14%; }
[dir='rtl'] .lp-eyebrow, [dir='rtl'] .lp-brand__tagline, [dir='rtl'] .lp-kv dt { letter-spacing: 0; }
.lp-lang { display: inline-flex; }
.lp-lang__link { font-size: 0.8125rem; font-weight: 600; color: var(--title); padding: 0.375rem 0.5rem; border-radius: 0.375rem; }
.lp-lang__link:hover { background: var(--light); color: var(--primary); }
.lp-menu .lp-lang__link { font-size: 1rem; padding: 0.75rem 0.25rem; }
@media (max-width: 760px) { .lp-header__actions > .lp-lang { display: none; } }