/* ==========================================================================
   AgriThai Holdings — Unified Site Stylesheet (agrithaiholdings.com)
   --------------------------------------------------------------------------
   Loaded by every page (HTML + PHP).
   1. Modern design tokens (emerald + wheat palette)
   2. Page shell (hero, prose, cards, CTA)
   3. Bootstrap-grid shim (so legacy markup still renders)
   4. Canvas-theme legacy shims (heading-block, team, etc.)
   5. Animations + mobile responsiveness
   ========================================================================== */

:root {
  --primary:      #1e40af;
  --primary-dark: #1e3a8a;
  --accent:       #38bdf8;
  --bg:           #06140c;
  --bg-soft:      #07221a;
  --bg-card:      rgba(6, 95, 70, 0.30);
  --text:         #ecfccb;
  --text-dim:     #a7d4ad;
  --text-mute:    #60a5fa;
  --border:       rgba(187, 247, 208, 0.10);
  --primary-rgb:  22, 163, 74;
  --accent-rgb:   250, 204, 21;
}

* { -webkit-font-smoothing: antialiased; }
/* Global font scale: 11px root (~31% smaller than the 16px browser default) */
html { scroll-behavior: smooth; font-size: 11px; }
body {
  font-family: 'Manrope', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  overflow-x: hidden;
  line-height: 1.6;
  font-size: 1rem; /* 13px */
  font-weight: 500; /* was browser-default 400 — bumped for a bolder, more confident feel */
}

/* Bolder defaults across body copy + interactive elements. */
p, li, span, a, label, td, th, dd, dt {
  font-weight: 500;
}
strong, b { font-weight: 800; }
button, input, select, textarea { font-weight: 600; }

h1, h2, h3, h4, h5, .serif {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  color: #ecfccb;
  letter-spacing: -0.015em;
  font-weight: 800; /* was inherited 700 */
}
h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: #bfdbfe; }

img { max-width: 100%; height: auto; }

/* ----- Typography helpers ----- */
.grad-text {
  background: linear-gradient(90deg, var(--primary), #bfdbfe 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(148, 163, 184, 0.08);
}

/* ----- Buttons ----- */
.btn-primary, .button {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #06140c !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 26px;
  border-radius: 999px;
  box-shadow: 0 14px 40px -12px rgba(var(--primary-rgb), .55);
  transition: .25s;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
}
.btn-primary:hover, .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 52px -12px rgba(var(--primary-rgb), .7);
  color: #06140c !important;
}
.btn-ghost {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0 !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 26px;
  border-radius: 12px;
  transition: .25s;
  text-decoration: none;
  font-size: 11px;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--primary);
  color: var(--primary) !important;
}

/* =============================================================
   PAGE HERO
   ============================================================= */
.page-hero {
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(240, 165, 64, 0.28) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.18)  0%, transparent 40%);
}
.page-hero-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 24px;
}
.breadcrumb i { font-size: 10px; opacity: .5; }
.breadcrumb a { color: var(--primary); opacity: .8; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb span { color: var(--text-dim); opacity: .7; }
.page-title {
  font-size: clamp(1.8rem, 4.4vw, 3.6rem);
  font-weight: 900; line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.02em;
}
.page-subtitle {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  color: var(--text-dim);
  max-width: 720px; margin: 0 auto; line-height: 1.6;
}

/* =============================================================
   PROSE BLOCK — beautifies any content
   ============================================================= */
.prose-block { max-width: 1100px; margin: 0 auto; padding: 64px 24px; }
.prose-block > * { color: #cbd5e1; line-height: 1.75; }
.prose-block h1, .prose-block h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: #fff; margin: 40px 0 14px;
  font-weight: 800; letter-spacing: -0.01em;
}
.prose-block h2:first-child, .prose-block h1:first-child { margin-top: 0; }
.prose-block h3 { font-size: 1.15rem; color: #fff; margin: 30px 0 12px; font-weight: 700; }
.prose-block h4 { font-size: 0.95rem; color: #fff; margin: 24px 0 10px; font-weight: 700; }
.prose-block p  { margin: 0 0 16px; font-size: 0.95rem; }
.prose-block strong, .prose-block b { color: #fff; font-weight: 700; }
.prose-block a {
  color: var(--primary); text-decoration: none;
  border-bottom: 1px solid rgba(240, 165, 64, 0.3); transition: .2s;
}
.prose-block a:hover { color: #bfdbfe; border-bottom-color: var(--primary); }
.prose-block ul, .prose-block ol { margin: 0 0 24px; padding-left: 24px; }
.prose-block li { margin-bottom: 8px; }
.prose-block ul li { list-style: none; position: relative; padding-left: 8px; }
.prose-block ul li::before {
  content: '■'; color: var(--primary); position: absolute; left: -16px;
  font-size: .7em; top: .6em;
}
.prose-block ol { list-style: decimal; }
.prose-block img {
  max-width: 100%; height: auto;
  border-radius: 18px;
  margin: 24px 0;
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6);
}
.prose-block blockquote {
  border-left: 4px solid var(--primary);
  padding: 8px 24px; margin: 24px 0;
  background: rgba(240, 165, 64, 0.05);
  border-radius: 0 14px 14px 0;
  font-style: italic; color: #e2e8f0;
}
.prose-block table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 14px; overflow: hidden;
}
.prose-block th, .prose-block td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.prose-block th {
  background: rgba(240, 165, 64, 0.08); color: var(--primary);
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem;
}
.prose-block hr {
  border: none; border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 48px 0;
}
.prose-block iframe, .prose-block video { max-width: 100%; border-radius: 14px; margin: 24px 0; }

/* =============================================================
   BOOTSTRAP-GRID SHIM
   (lets legacy <div class="row col-md-*"> markup keep its layout)
   ============================================================= */
.prose-block .container, .prose-block .container-fluid { width: 100%; max-width: 100%; padding: 0; margin: 0; }
.prose-block .row {
  display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 24px;
}
.prose-block [class*="col-"] { flex: 1 1 280px; min-width: 0; }
.prose-block .col-1,  .prose-block .col-sm-1,  .prose-block .col-md-1,  .prose-block .col-lg-1  { flex: 0 0 calc((100% / 12) * 1 - 22px); }
.prose-block .col-2,  .prose-block .col-sm-2,  .prose-block .col-md-2,  .prose-block .col-lg-2  { flex: 0 0 calc((100% / 12) * 2 - 22px); }
.prose-block .col-3,  .prose-block .col-sm-3,  .prose-block .col-md-3,  .prose-block .col-lg-3  { flex: 0 0 calc((100% / 12) * 3 - 22px); }
.prose-block .col-4,  .prose-block .col-sm-4,  .prose-block .col-md-4,  .prose-block .col-lg-4  { flex: 0 0 calc((100% / 12) * 4 - 22px); }
.prose-block .col-5,  .prose-block .col-sm-5,  .prose-block .col-md-5,  .prose-block .col-lg-5  { flex: 0 0 calc((100% / 12) * 5 - 22px); }
.prose-block .col-6,  .prose-block .col-sm-6,  .prose-block .col-md-6,  .prose-block .col-lg-6  { flex: 0 0 calc((100% / 12) * 6 - 22px); }
.prose-block .col-7,  .prose-block .col-sm-7,  .prose-block .col-md-7,  .prose-block .col-lg-7  { flex: 0 0 calc((100% / 12) * 7 - 22px); }
.prose-block .col-8,  .prose-block .col-sm-8,  .prose-block .col-md-8,  .prose-block .col-lg-8  { flex: 0 0 calc((100% / 12) * 8 - 22px); }
.prose-block .col-9,  .prose-block .col-sm-9,  .prose-block .col-md-9,  .prose-block .col-lg-9  { flex: 0 0 calc((100% / 12) * 9 - 22px); }
.prose-block .col-10, .prose-block .col-sm-10, .prose-block .col-md-10, .prose-block .col-lg-10 { flex: 0 0 calc((100% / 12) * 10 - 22px); }
.prose-block .col-11, .prose-block .col-sm-11, .prose-block .col-md-11, .prose-block .col-lg-11 { flex: 0 0 calc((100% / 12) * 11 - 22px); }
.prose-block .col-12, .prose-block .col-sm-12, .prose-block .col-md-12, .prose-block .col-lg-12 { flex: 0 0 100%; }
@media (max-width: 768px) {
  .prose-block [class*="col-md-"], .prose-block [class*="col-lg-"] { flex: 1 1 100%; }
}

/* Bootstrap utility shims used by Canvas content */
.prose-block .text-center { text-align: center; }
.prose-block .text-end, .prose-block .text-right { text-align: right; }
.prose-block .text-start, .prose-block .text-left { text-align: left; }
.prose-block .mb-0 { margin-bottom: 0 !important; }
.prose-block .mb-1 { margin-bottom: .5rem; }  .prose-block .mb-2 { margin-bottom: 1rem; }
.prose-block .mb-3 { margin-bottom: 1.5rem; } .prose-block .mb-4 { margin-bottom: 2rem; }
.prose-block .mb-5 { margin-bottom: 3rem; }
.prose-block .mt-0 { margin-top: 0 !important; }
.prose-block .mt-3 { margin-top: 1.5rem; }    .prose-block .mt-4 { margin-top: 2rem; }
.prose-block .p-3 { padding: 1.5rem; }        .prose-block .p-4 { padding: 2rem; }
.prose-block .py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.prose-block .py-4 { padding-top: 2rem;   padding-bottom: 2rem; }
.prose-block .d-flex { display: flex; }
.prose-block .align-items-center { align-items: center; }
.prose-block .justify-content-center { justify-content: center; }
.prose-block .justify-content-between { justify-content: space-between; }
.prose-block .flex-wrap { flex-wrap: wrap; }
.prose-block .gap-3 { gap: 1rem; }

/* =============================================================
   CANVAS-THEME LEGACY SHIMS
   ============================================================= */
.prose-block .heading-block {
  margin-bottom: 32px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.prose-block .heading-block.center, .prose-block .heading-block.center * { text-align: center; }
.prose-block .heading-block h1, .prose-block .heading-block h2, .prose-block .heading-block h3 { margin: 0 0 10px; }
.prose-block .heading-block span {
  display: block; color: var(--primary);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
}
.prose-block .border-bottom-0 { border-bottom: none !important; }

.prose-block .team {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  margin: 16px 0;
  transition: .3s;
}
.prose-block .team:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  background: rgba(15, 23, 42, 0.6);
}
.prose-block .team.team-list {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.prose-block .team-image, .prose-block .team-image img {
  border-radius: 16px; overflow: hidden;
}
.prose-block .team-image { flex: 0 0 220px; max-width: 220px; }
.prose-block .team-image img { width: 100%; display: block; }
.prose-block .team-desc { flex: 1 1 0; min-width: 0; }
.prose-block .team-title h4, .prose-block .team-title h3 {
  margin: 0 0 6px;
  color: #fff;
}
.prose-block .team-content p { margin: 0; color: #cbd5e1; font-size: .95rem; line-height: 1.65; }
@media (max-width: 640px) {
  .prose-block .team.team-list { flex-direction: column; align-items: stretch; }
  .prose-block .team-image { flex: 1 1 100%; max-width: 100%; }
}

/* Feature/icon boxes */
.prose-block .feature-box, .prose-block .ibox {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  transition: .3s;
}
.prose-block .feature-box:hover, .prose-block .ibox:hover {
  transform: translateY(-4px); border-color: var(--primary);
}
.prose-block .fbox-icon { color: var(--primary); font-size: 32px; margin-bottom: 16px; }

/* Card-style sections */
.prose-block .section, .prose-block .content-wrap > .container {
  padding: 0; background: transparent; border: none;
}

/* =============================================================
   CTA BANNER (drop-in, before footer on every page)
   ============================================================= */
.page-cta {
  position: relative;
  padding: 80px 24px;
  margin-top: 40px;
  text-align: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(240, 165, 64, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.5));
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.page-cta-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.page-cta h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin: 0 0 14px; font-weight: 900; letter-spacing: -0.01em;
}
.page-cta p {
  font-size: 1.1rem; color: var(--text-dim);
  margin: 0 0 28px; line-height: 1.6;
}
.page-cta .cta-actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

/* =============================================================
   STATS STRIP  (section 2)
   ============================================================= */
.stats-strip {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.3));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 24px;
}
.stats-wrap {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.stat-tile { text-align: center; padding: 12px; }
.stat-tile i { font-size: 28px; color: var(--primary); display: block; margin-bottom: 12px; }
.stat-tile .stat-num { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; font-family: 'Playfair Display', serif; line-height: 1; }
.stat-tile .stat-lbl { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); margin-top: 8px; }
@media (max-width: 768px) {
  .stats-wrap { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .stat-tile i { font-size: 22px; margin-bottom: 8px; }
}

/* =============================================================
   UNIVERSAL SECTION SHELL  (sections 4–7)
   ============================================================= */
.universal-section { padding: 80px 24px; position: relative; }
.universal-section.alt-bg {
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.4), transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.universal-inner { max-width: 1280px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .kicker {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: rgba(240, 165, 64, 0.1); border: 1px solid rgba(240, 165, 64, 0.2);
  color: var(--primary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em;
  margin-bottom: 18px;
}
.section-head h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900; margin: 0 0 10px; letter-spacing: -0.01em;
}
.section-head .lead { color: var(--text-dim); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }

/* ----- How It Works steps (section 4) ----- */
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step-card {
  background: rgba(15, 23, 42, 0.4); border: 1px solid var(--border);
  border-radius: 24px; padding: 32px 24px; text-align: center; position: relative; transition: .3s;
}
.step-card:hover { transform: translateY(-6px); border-color: var(--primary); }
.step-card .step-num {
  position: absolute; top: -16px; right: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #0f172a; font-weight: 900; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -6px var(--primary);
}
.step-card .step-icon {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 18px;
  background: rgba(240, 165, 64, 0.1); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.step-card h3 { font-size: 1.1rem; margin: 0 0 10px; color: #fff; }
.step-card p { font-size: .9rem; color: var(--text-dim); line-height: 1.6; margin: 0; }
@media (max-width: 992px) { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .step-grid { grid-template-columns: 1fr; } }

/* ----- Why Us cards (section 5) ----- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.why-card {
  background: rgba(15, 23, 42, 0.4); border: 1px solid var(--border);
  border-radius: 28px; padding: 36px; transition: .3s;
}
.why-card:hover { transform: translateY(-6px); border-color: var(--primary); background: rgba(15, 23, 42, 0.6); }
.why-card .why-icon {
  width: 64px; height: 64px; border-radius: 18px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(240, 165, 64, 0.18), rgba(240, 165, 64, 0.05));
  color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.why-card h3 { font-size: 1.3rem; margin: 0 0 10px; color: #fff; }
.why-card p { color: var(--text-dim); line-height: 1.7; margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }

/* ----- Plans grid (section 6) ----- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.2));
  border: 1px solid var(--border); border-radius: 28px; padding: 36px 32px;
  position: relative; overflow: hidden; transition: .3s;
}
.plan-card.featured { border-color: var(--primary); box-shadow: 0 30px 80px -30px var(--primary); }
.plan-card:hover { transform: translateY(-4px); }
.plan-card .plan-badge {
  position: absolute; top: 18px; right: 18px;
  background: var(--primary); color: #0f172a;
  padding: 5px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
}
.plan-card h3 { font-size: 1.25rem; margin: 0 0 6px; color: #fff; }
.plan-card .plan-roi { font-size: 2.8rem; font-weight: 900; line-height: 1; font-family: 'Playfair Display', serif; }
.plan-card .plan-roi-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-mute); margin: 8px 0 24px;
}
.plan-card .plan-bullets { list-style: none; padding: 0; margin: 0 0 28px; }
.plan-card .plan-bullets li {
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem; color: #cbd5e1; padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.plan-card .plan-bullets li::before { content: none; }
.plan-card .plan-bullets li i { color: var(--primary); font-size: .8rem; }
.plan-card .plan-cta { width: 100%; text-align: center; padding: 14px; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }

/* ----- Testimonials (section 7) ----- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card {
  background: rgba(15, 23, 42, 0.5); border: 1px solid var(--border);
  border-radius: 24px; padding: 32px; position: relative; transition: .3s;
}
.testi-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.testi-card .testi-quote-mark {
  color: var(--primary); opacity: .3; font-size: 28px; margin-bottom: 14px; display: block;
}
.testi-card blockquote {
  background: transparent !important; border: none; padding: 0; margin: 0 0 24px;
  color: #cbd5e1; font-size: 1rem; line-height: 1.7; font-style: normal; border-radius: 0;
}
.testi-card figcaption { display: flex; align-items: center; gap: 14px; }
.testi-card .testi-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #0f172a; font-weight: 900; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.testi-card figcaption strong { display: block; color: #fff; font-size: .92rem; }
.testi-card figcaption span { font-size: .8rem; color: var(--text-mute); }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

/* =============================================================
   ROI CALCULATOR (in footer)
   ============================================================= */
.roi-calc {
  background: linear-gradient(180deg, rgba(240, 165, 64, 0.08), rgba(240, 165, 64, 0.02));
  border: 1px solid rgba(240, 165, 64, 0.18);
  border-radius: 20px; padding: 24px;
}
.roi-calc h4 {
  font-size: 12px !important; color: var(--primary) !important;
  text-transform: uppercase; letter-spacing: .18em; font-weight: 900;
  margin: 0 0 16px !important; font-family: 'Outfit', sans-serif !important;
}
.roi-calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.roi-calc label {
  display: block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-mute); margin-bottom: 5px;
}
.roi-calc input,
.roi-calc select {
  width: 100%; padding: 9px 11px; font-size: 13px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px; color: #fff; font-family: inherit; outline: none; transition: .2s;
}
.roi-calc input:focus, .roi-calc select:focus {
  border-color: var(--primary); background: rgba(0, 0, 0, 0.6);
}
.roi-calc-result {
  margin-top: 14px; padding: 14px;
  background: rgba(0, 0, 0, 0.4); border-radius: 10px;
}
.roi-calc-result .lbl {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em; color: var(--text-mute);
}
.roi-calc-result .val {
  font-size: 1.5rem; font-weight: 900; font-family: 'Playfair Display', serif;
  background: linear-gradient(90deg, var(--primary), #bfdbfe 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.1; margin-top: 4px;
}
.roi-calc-result .sub { font-size: 11px; color: var(--text-mute); margin-top: 4px; }

/* =============================================================
   ANIMATIONS
   ============================================================= */
.fade-in { opacity: 0; transform: translateY(20px); transition: .8s; }
.fade-in.visible { opacity: 1; transform: none; }

/* =============================================================
   SCROLLBAR
   ============================================================= */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* =============================================================
   MOBILE RESPONSIVE TWEAKS
   ============================================================= */
@media (max-width: 768px) {
  .page-hero { padding: 80px 0 60px; }
  .prose-block { padding: 40px 20px; }
  .prose-block table { display: block; overflow-x: auto; }
  .prose-block .row { gap: 16px; }
  .page-cta { padding: 56px 20px; }
}
@media (max-width: 480px) {
  .btn-primary, .button, .btn-ghost { padding: 12px 24px; font-size: 12px; }
  .breadcrumb { font-size: 10px; }
}

/* ============================================================
   FAQ Accordion + Timeline + Leadership cards
   (used by Company.php, faqs.php, anywhere admin uses these classes)
   ============================================================ */

/* --- FAQ accordion --- */
.prose-block .faq-list { display: grid; gap: 14px; margin: 24px 0 32px; }
.prose-block .faq-item {
  background: rgba(15,23,42,.4);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: .25s;
}
.prose-block .faq-item:hover { border-color: var(--primary); }
.prose-block .faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 22px;
  font-weight: 700; color: #fff; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: 'Outfit', sans-serif;
}
.prose-block .faq-item summary::-webkit-details-marker { display: none; }
.prose-block .faq-item summary::after {
  content: '\002B';      /* + */
  font-size: 1.4rem; line-height: 1;
  color: var(--primary); transition: transform .25s;
}
.prose-block .faq-item[open] summary::after { content: '\2212'; }   /* − */
.prose-block .faq-item[open] summary { border-bottom: 1px solid var(--border); }
.prose-block .faq-item .faq-body {
  padding: 16px 22px 20px;
  color: #cbd5e1; font-size: .92rem; line-height: 1.7;
}
.prose-block .faq-item .faq-body p:last-child { margin-bottom: 0; }
.prose-block .faq-cat-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--primary); margin: 32px 0 14px; font-weight: 800;
}
.prose-block .faq-cat-title::before { content: ''; width: 24px; height: 2px; background: var(--primary); }

/* --- Vertical timeline (used in Company "Our Story") --- */
.prose-block .hs-timeline { position: relative; padding-left: 28px; margin: 24px 0 32px; }
.prose-block .hs-timeline::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(180deg, var(--primary), transparent);
}
.prose-block .hs-timeline-item { position: relative; padding: 0 0 24px 14px; }
.prose-block .hs-timeline-item::before {
  content: ''; position: absolute; left: -25px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(240,165,64,.15);
}
.prose-block .hs-timeline-item h4 { color: #fff; margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; font-family: 'Outfit', sans-serif; }
.prose-block .hs-timeline-item .hs-timeline-year {
  display: inline-block; background: rgba(240,165,64,.12); color: var(--primary);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
}
.prose-block .hs-timeline-item p { margin: 0; color: #cbd5e1; font-size: .9rem; line-height: 1.65; }

/* --- Leadership cards --- */
.prose-block .leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; margin: 24px 0 32px;
}
.prose-block .leader-card {
  background: rgba(15,23,42,.5);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 22px; text-align: center; transition: .25s;
}
.prose-block .leader-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.prose-block .leader-card .leader-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #0f172a; font-weight: 900; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
}
.prose-block .leader-card h4 { margin: 0 0 4px; font-size: 1rem; color: #fff; font-weight: 700; }
.prose-block .leader-card .leader-role { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.prose-block .leader-card p { margin: 10px 0 0; font-size: .85rem; color: #cbd5e1; line-height: 1.55; }

/* --- Value pillars --- */
.prose-block .pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; margin: 24px 0;
}
.prose-block .pillar {
  background: linear-gradient(180deg, rgba(240,165,64,.05), transparent);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 14px; padding: 22px;
}
.prose-block .pillar h4 { margin: 0 0 8px; color: #fff; font-size: 1rem; font-weight: 700; font-family: 'Outfit', sans-serif; }
.prose-block .pillar p { margin: 0; color: #cbd5e1; font-size: .88rem; line-height: 1.6; }
.prose-block .pillar .pillar-num {
  display: inline-block; font-size: 11px; font-weight: 900;
  color: var(--primary); letter-spacing: .15em; margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE & DEVICE RESPONSIVENESS — site-wide polish layer.
   Loaded by every public page via css/site.css. Improves tap-target
   sizes, prevents iOS form-zoom, kills horizontal overflow, and adjusts
   spacing/typography for narrow screens.
   ════════════════════════════════════════════════════════════════ */

/* 1. Lock horizontal scroll — the #1 cause of "site feels broken on mobile" */
html, body { overflow-x: hidden; max-width: 100vw; }

/* 2. Touch-friendly tap targets (WCAG 2.5.5 — min 44×44px) */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn-primary, .button, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  /* Form inputs at 16px+ to prevent iOS Safari auto-zoom on focus */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="search"],
  input[type="url"], textarea, select {
    font-size: 16px !important;
  }
}

/* 3. Container padding tightens on small screens — content stops touching edges */
@media (max-width: 720px) {
  .container, .container-fluid, .universal-inner,
  .hero-inner, .page-cta-inner, .prose-block,
  .hs-newsletter-inner, .hs-footer-wrap, .roi-band-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Smaller headings on phones so they don't break out of the viewport */
  h1 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.15; }
  h2 { font-size: clamp(22px, 5.5vw, 32px) !important; line-height: 1.2; }
  h3 { font-size: clamp(18px, 4.5vw, 24px) !important; }
}

/* 4. Wide images / iframes / videos always scale */
img, iframe, video, svg { max-width: 100%; height: auto; }

/* 5. Tables on mobile — scroll horizontally rather than break the layout */
@media (max-width: 720px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 6. Code blocks scroll instead of overflow */
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }

/* 7. Smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* 8. Safe-area insets for iPhone notched / dynamic-island devices */
@supports (padding: max(0px)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* 9. Hide decorative-only visual flair on phones (saves render work) */
@media (max-width: 540px) {
  .auth-pitch-side::before, .auth-pitch-side::after,
  .hero-blob, .hero-deco, .deco-flourish { display: none; }
}

/* 10. Sticky elements get a top-offset on mobile so they don't collide with nav */
@media (max-width: 720px) {
  .sticky-nav { top: 0; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   11. UNIVERSAL CTA-BUTTON RESPONSIVENESS — single source of truth.
   Every public page (index.php hero, render_page.php CMS pages, plans,
   faq, etc.) renders its primary CTA as <a class="btn ...">  inside a
   .cta-row / .cta-actions / .page-cta-inner wrapper. The inline styles
   on each template set `white-space: nowrap`, which causes the
   "Start Investing" / "Open an account" buttons to overflow on phones
   between 360-700px. These rules override those locally-scoped styles
   so the buttons stack full-width, wrap text, and stay tap-friendly.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Force any CTA-row pattern to stack vertically and use full width */
  .cta-row,
  .cta-actions,
  .page-cta .cta-actions,
  .hero-copy .cta-row,
  .ft-hero .cta-row,
  .ft-cta .cta-row,
  main.fintech .cta .cta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
  }

  /* Every link/button inside those rows goes full-width, centered,
     and text wraps cleanly so long labels never overflow. */
  .cta-row > a,
  .cta-row > button,
  .cta-row .btn,
  .cta-actions > a,
  .cta-actions > button,
  .cta-actions .btn,
  main.fintech .cta .cta-row .btn,
  .ft-hero .cta-row .btn,
  .ft-cta .cta-row .btn {
    width: 100% !important;
    max-width: 100%;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center;
    box-sizing: border-box;
  }

  /* Drop nowrap on every generic button variant so long labels wrap
     instead of pushing past the viewport edge. */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .button,
  main.fintech .btn,
  .ft .btn {
    white-space: normal !important;
    word-break: break-word;
  }

  /* Tighten padding on small screens so the buttons don't look
     comically large once they're full-width. */
  .btn-primary, .button, .btn-ghost {
    padding: 12px 20px;
    font-size: 12px;
    letter-spacing: .06em;
  }
  main.fintech .btn, .ft .btn {
    padding: 12px 18px;
    font-size: 14px;
  }
}

/* Tap-target hardening for touch devices, regardless of width. */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .button,
  main.fintech .btn, .ft .btn {
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════
   13. PLAN-CARD "INVEST NOW" BUTTONS — mobile sizing
   ────────────────────────────────────────────────────────────────
   index.php and render_page.php both ship inline rules that force
   .pf-cta-btn to `width: 100%` under 760px, which makes the green
   "Invest now" button stretch across the entire portfolio card on
   phones and look comically oversized. Constrain it to a compact,
   self-sizing pill that's still tap-friendly. !important overrides
   the inline-stylesheet rules in those PHP files so this single CSS
   edit is the only place to touch.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .pf .pf-cta-btn,
  .ft-pf .pf-cta-btn,
  main.fintech .pf .pf-cta-btn {
    width: auto !important;
    max-width: 100%;
    min-width: 0 !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    align-self: flex-start;
  }
  .pf .pf-cta,
  .ft-pf .cta,
  .ft-pf .pf-cta {
    display: flex;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .pf .pf-cta-btn,
  .ft-pf .pf-cta-btn,
  main.fintech .pf .pf-cta-btn {
    padding: 9px 16px !important;
    font-size: 12.5px !important;
    min-height: 40px;
  }
}

/* ════════════════════════════════════════════════════════════════
   14. ROI / INVESTMENT CALCULATOR — fully mobile-responsive.
   ────────────────────────────────────────────────────────────────
   The live calculator in partials/site_footer.php (.roi-band wrapper,
   .roi-card form) ships its own inline styles. They cover desktop and
   ~540px, but break at <480px in several ways:
     • the label + amount display flex row overflows when the input
       hits its min-width: 130px and the label can't shrink further
     • the kicker / title / sub-head don't scale down on tight phones
     • the trust-list bullets bunch up
     • the slider thumb is below the 44×44px tap target
     • the result metric values can clip when the currency string is long
   Section 14 fixes every one of these with !important overrides so a
   single CSS edit is the only place to touch.
   ════════════════════════════════════════════════════════════════ */

/* Below the inline 980px breakpoint — already 1-col, just tighten the band. */
@media (max-width: 980px) {
  .roi-band {
    padding: 44px 18px !important;
  }
  .roi-band-inner {
    gap: 28px !important;
  }
  .roi-head .roi-trust {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 14px;
  }
  .roi-head .roi-trust-item {
    font-size: 12.5px;
  }
}

/* Tablet / large phones */
@media (max-width: 720px) {
  .roi-band {
    padding: 36px 14px !important;
  }
  .roi-title {
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
    line-height: 1.15 !important;
  }
  .roi-sub-head {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  .roi-kicker {
    font-size: 11px;
    padding: 5px 12px;
    margin-bottom: 12px !important;
  }
  .roi-card {
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }
  .roi-field { margin-bottom: 16px !important; }
  .roi-field label {
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }
}

/* Phones — stack the label/amount row, full-width inputs, big tap targets */
@media (max-width: 540px) {
  /* Label + amount display: stack vertically so the input gets full width */
  .roi-field-amt .roi-field-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .roi-field-amt .roi-field-top label {
    margin-bottom: 0 !important;
  }
  .roi-amt-display {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    border-radius: 11px !important;
    box-sizing: border-box;
  }
  .roi-amt-display .roi-cur {
    font-size: 15px;
    margin-right: 5px;
  }
  .roi-amt-display input {
    font-size: 20px !important;
    width: 100% !important;
  }

  /* Slider — larger thumb meets WCAG 44px tap target */
  #roi-amt-slider {
    height: 10px !important;
  }
  #roi-amt-slider::-webkit-slider-thumb {
    width: 26px !important; height: 26px !important;
  }
  #roi-amt-slider::-moz-range-thumb {
    width: 26px !important; height: 26px !important;
  }
  .roi-amt-marks {
    font-size: 10.5px;
    margin-top: 8px;
  }

  /* Plan + duration row already stacks via inline; harden it */
  .roi-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .roi-select-wrap select,
  .roi-input-suffix input {
    padding: 12px 14px !important;
    font-size: 16px !important;  /* prevents iOS Safari auto-zoom */
    border-radius: 11px !important;
  }
  .roi-select-wrap select { padding-right: 36px !important; }
  .roi-input-suffix input { padding-right: 52px !important; }
  .roi-input-suffix span { font-size: 11.5px; right: 12px; }
  .roi-select-arrow { right: 12px; }

  /* Result block — single column, no clipping of large numbers */
  .roi-result {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 16px !important;
    margin-top: 20px !important;
    border-radius: 12px !important;
  }
  .roi-metric {
    text-align: center;
    padding: 14px 0;
    border-bottom: 1px solid #dbeafe;
    align-items: center;
  }
  .roi-metric:first-child { padding-top: 0; }
  .roi-metric:last-child  { padding-bottom: 0; border-bottom: 0; }
  .roi-metric-lbl { font-size: 11px; }
  .roi-metric-val {
    font-size: clamp(20px, 6.5vw, 26px) !important;
    word-break: break-word;
  }
  .roi-metric-total .roi-metric-val {
    font-size: clamp(24px, 8vw, 30px) !important;
  }
  .roi-metric-sub { font-size: 11.5px; }

  /* CTA */
  .roi-cta-btn {
    margin-top: 16px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    min-height: 48px;
    white-space: normal !important;
  }
}

/* Tiny phones (< 380px) — final polish so nothing overflows on iPhone SE 1st gen */
@media (max-width: 380px) {
  .roi-band {
    padding: 32px 12px !important;
  }
  .roi-card {
    padding: 18px 14px !important;
  }
  .roi-title { font-size: 1.35rem !important; }
  .roi-sub-head { font-size: 13.5px !important; }
  .roi-amt-display input { font-size: 18px !important; }
  .roi-amt-display .roi-cur { font-size: 14px; }
  .roi-trust-item { font-size: 12px !important; }
  .roi-cta-btn { font-size: 13.5px !important; padding: 13px 16px !important; }
}

/* Touch devices — ensure the ROI form controls are easy to interact with */
@media (hover: none) and (pointer: coarse) {
  .roi-select-wrap select,
  .roi-input-suffix input,
  .roi-amt-display input { min-height: 44px; }
  .roi-cta-btn { min-height: 48px; }
  /* Bigger slider hit area without making the visual thumb huge */
  #roi-amt-slider { padding: 10px 0; background-clip: content-box; }
}

/* ════════════════════════════════════════════════════════════════
   12. CMS-CONTENT SHIM FOR `.ft-prose-inner`
   ────────────────────────────────────────────────────────────────
   contact.php, faqs.php, about.php, Company.php (and every other
   slug routed through partials/render_page.php) wrap admin-authored
   HTML inside `<div class="ft-prose-inner">`. The same authored HTML
   uses Bootstrap-grid + Canvas-theme classes that this stylesheet
   already shimmed for `.prose-block`. Without these aliases the
   buttons, FAQ accordions, feature-boxes, timelines, and column grids
   on the FAQs / Contact / About pages render as plain stacked blocks.
   Single source of truth: edit `.prose-block` once and the
   `.ft-prose-inner` rule below applies the same look on every CMS
   page rendered by render_page.php.
   ════════════════════════════════════════════════════════════════ */

/* Bootstrap-grid shim — same math as `.prose-block .row / .col-*`. */
.ft-prose-inner .container,
.ft-prose-inner .container-fluid { width: 100%; max-width: 100%; padding: 0; margin: 0; }
.ft-prose-inner .row {
  display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0;
}
.ft-prose-inner [class*="col-"] { flex: 1 1 280px; min-width: 0; }
.ft-prose-inner .col-1,  .ft-prose-inner .col-sm-1,  .ft-prose-inner .col-md-1,  .ft-prose-inner .col-lg-1  { flex: 0 0 calc((100% / 12) * 1 - 18px); }
.ft-prose-inner .col-2,  .ft-prose-inner .col-sm-2,  .ft-prose-inner .col-md-2,  .ft-prose-inner .col-lg-2  { flex: 0 0 calc((100% / 12) * 2 - 18px); }
.ft-prose-inner .col-3,  .ft-prose-inner .col-sm-3,  .ft-prose-inner .col-md-3,  .ft-prose-inner .col-lg-3  { flex: 0 0 calc((100% / 12) * 3 - 18px); }
.ft-prose-inner .col-4,  .ft-prose-inner .col-sm-4,  .ft-prose-inner .col-md-4,  .ft-prose-inner .col-lg-4  { flex: 0 0 calc((100% / 12) * 4 - 18px); }
.ft-prose-inner .col-5,  .ft-prose-inner .col-sm-5,  .ft-prose-inner .col-md-5,  .ft-prose-inner .col-lg-5  { flex: 0 0 calc((100% / 12) * 5 - 18px); }
.ft-prose-inner .col-6,  .ft-prose-inner .col-sm-6,  .ft-prose-inner .col-md-6,  .ft-prose-inner .col-lg-6  { flex: 0 0 calc((100% / 12) * 6 - 18px); }
.ft-prose-inner .col-7,  .ft-prose-inner .col-sm-7,  .ft-prose-inner .col-md-7,  .ft-prose-inner .col-lg-7  { flex: 0 0 calc((100% / 12) * 7 - 18px); }
.ft-prose-inner .col-8,  .ft-prose-inner .col-sm-8,  .ft-prose-inner .col-md-8,  .ft-prose-inner .col-lg-8  { flex: 0 0 calc((100% / 12) * 8 - 18px); }
.ft-prose-inner .col-9,  .ft-prose-inner .col-sm-9,  .ft-prose-inner .col-md-9,  .ft-prose-inner .col-lg-9  { flex: 0 0 calc((100% / 12) * 9 - 18px); }
.ft-prose-inner .col-10, .ft-prose-inner .col-sm-10, .ft-prose-inner .col-md-10, .ft-prose-inner .col-lg-10 { flex: 0 0 calc((100% / 12) * 10 - 18px); }
.ft-prose-inner .col-11, .ft-prose-inner .col-sm-11, .ft-prose-inner .col-md-11, .ft-prose-inner .col-lg-11 { flex: 0 0 calc((100% / 12) * 11 - 18px); }
.ft-prose-inner .col-12, .ft-prose-inner .col-sm-12, .ft-prose-inner .col-md-12, .ft-prose-inner .col-lg-12 { flex: 0 0 100%; }

@media (max-width: 768px) {
  .ft-prose-inner [class*="col-md-"],
  .ft-prose-inner [class*="col-lg-"] { flex: 1 1 100%; }
  .ft-prose-inner .row { gap: 14px; }
}

/* Feature/icon boxes — light theme (contact page "Email / Address / Hours" cards) */
.ft-prose-inner .feature-box,
.ft-prose-inner .ibox {
  background: #fff;
  border: 1px solid #e6e9e6;
  border-radius: 16px;
  padding: 26px;
  transition: .25s;
}
.ft-prose-inner .feature-box:hover,
.ft-prose-inner .ibox:hover {
  border-color: #1e40af;
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -30px rgba(4,120,87,.2);
}
.ft-prose-inner .fbox-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: #dbeafe; color: #1e3a8a;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 16px;
}
.ft-prose-inner .feature-box h4,
.ft-prose-inner .feature-box h3,
.ft-prose-inner .ibox h4,
.ft-prose-inner .ibox h3 {
  margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #0f1e3d;
}
.ft-prose-inner .feature-box p,
.ft-prose-inner .ibox p {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: #334155;
}

/* FAQ accordion — light theme (faqs.php "Getting Started / Deposits / …") */
.ft-prose-inner .faq-list { display: grid; gap: 12px; margin: 18px 0 28px; }
.ft-prose-inner .faq-item {
  background: #fff;
  border: 1px solid #e6e9e6;
  border-radius: 14px;
  overflow: hidden;
  transition: .2s;
}
.ft-prose-inner .faq-item:hover { border-color: #d6dad6; }
.ft-prose-inner .faq-item summary {
  cursor: pointer; list-style: none;
  padding: 16px 20px;
  font-weight: 600; color: #0f1e3d; font-size: 15.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ft-prose-inner .faq-item summary::-webkit-details-marker { display: none; }
.ft-prose-inner .faq-item summary::after {
  content: '\002B'; font-size: 22px; line-height: 1;
  color: #1e40af; transition: transform .2s; flex-shrink: 0;
}
.ft-prose-inner .faq-item[open] summary::after { content: '\2212'; }
.ft-prose-inner .faq-item[open] summary { border-bottom: 1px solid #e6e9e6; }
.ft-prose-inner .faq-item .faq-body {
  padding: 14px 20px 18px;
  color: #334155; font-size: 14.5px; line-height: 1.7;
}
.ft-prose-inner .faq-item .faq-body p:last-child { margin-bottom: 0; }
.ft-prose-inner .faq-item .faq-body a { color: #1e40af; border-bottom: 1px solid rgba(4,120,87,.3); }
.ft-prose-inner .faq-cat-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #1e40af; margin: 28px 0 12px; font-weight: 700;
}
.ft-prose-inner .faq-cat-title::before { content: ''; width: 22px; height: 2px; background: #1e40af; }

/* Vertical timeline (Company "Our Story") — light theme */
.ft-prose-inner .hs-timeline { position: relative; padding-left: 28px; margin: 22px 0 30px; }
.ft-prose-inner .hs-timeline::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(180deg, #1e40af, transparent);
}
.ft-prose-inner .hs-timeline-item { position: relative; padding: 0 0 22px 14px; }
.ft-prose-inner .hs-timeline-item::before {
  content: ''; position: absolute; left: -25px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #1e40af; box-shadow: 0 0 0 4px rgba(4,120,87,.12);
}
.ft-prose-inner .hs-timeline-item h4 { color: #0f1e3d; margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.ft-prose-inner .hs-timeline-item .hs-timeline-year {
  display: inline-block; background: #dbeafe; color: #1e3a8a;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
}
.ft-prose-inner .hs-timeline-item p { margin: 0; color: #334155; font-size: 14.5px; line-height: 1.65; }

/* Leadership cards — light theme */
.ft-prose-inner .leader-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin: 22px 0 30px;
}
.ft-prose-inner .leader-card {
  background: #fff; border: 1px solid #e6e9e6;
  border-radius: 18px; padding: 22px; text-align: center; transition: .25s;
}
.ft-prose-inner .leader-card:hover { transform: translateY(-4px); border-color: #1e40af; box-shadow: 0 30px 60px -30px rgba(4,120,87,.18); }
.ft-prose-inner .leader-card .leader-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #1e40af, #1e3a8a);
  color: #fff; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ft-prose-inner .leader-card h4 { margin: 0 0 4px; font-size: 16px; color: #0f1e3d; font-weight: 600; }
.ft-prose-inner .leader-card .leader-role {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #1e40af; font-weight: 700;
}
.ft-prose-inner .leader-card p { margin: 10px 0 0; font-size: 13.5px; color: #334155; line-height: 1.55; }

/* Value pillars — light theme */
.ft-prose-inner .pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin: 22px 0;
}
.ft-prose-inner .pillar {
  background: #fff;
  border: 1px solid #e6e9e6;
  border-left: 3px solid #1e40af;
  border-radius: 14px; padding: 22px;
}
.ft-prose-inner .pillar h4 { margin: 0 0 8px; color: #0f1e3d; font-size: 16px; font-weight: 600; }
.ft-prose-inner .pillar p { margin: 0; color: #334155; font-size: 14px; line-height: 1.6; }
.ft-prose-inner .pillar .pillar-num {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  color: #1e40af; letter-spacing: .15em; margin-bottom: 8px;
}

/* Team list (Cryptocurrencies page "Bitcoin / Ethereum / USDT" rows) — light theme */
.ft-prose-inner .team {
  background: #fff; border: 1px solid #e6e9e6;
  border-radius: 18px; padding: 22px; margin: 16px 0;
  transition: .25s;
}
.ft-prose-inner .team:hover { transform: translateY(-3px); border-color: #1e40af; }
.ft-prose-inner .team.team-list {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.ft-prose-inner .team-image, .ft-prose-inner .team-image img {
  border-radius: 14px; overflow: hidden;
}
.ft-prose-inner .team-image { flex: 0 0 200px; max-width: 200px; }
.ft-prose-inner .team-image img { width: 100%; display: block; }
.ft-prose-inner .team-desc { flex: 1 1 0; min-width: 0; }
.ft-prose-inner .team-title h4 { margin: 0 0 6px; color: #0f1e3d; }
.ft-prose-inner .team-content p { margin: 0; color: #334155; font-size: 14.5px; line-height: 1.65; }
@media (max-width: 640px) {
  .ft-prose-inner .team.team-list { flex-direction: column; align-items: stretch; }
  .ft-prose-inner .team-image { flex: 1 1 100%; max-width: 100%; }
}

/* Heading block + utility shims — same as prose-block but light-theme */
.ft-prose-inner .heading-block {
  margin: 28px 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid #e6e9e6;
}
.ft-prose-inner .heading-block.center,
.ft-prose-inner .heading-block.center * { text-align: center; }
.ft-prose-inner .heading-block h1,
.ft-prose-inner .heading-block h2,
.ft-prose-inner .heading-block h3 { margin: 0 0 8px; }
.ft-prose-inner .heading-block span {
  display: block; color: #1e40af;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
}
.ft-prose-inner .text-center { text-align: center; }
.ft-prose-inner .text-end, .ft-prose-inner .text-right { text-align: right; }
.ft-prose-inner .text-start, .ft-prose-inner .text-left { text-align: left; }
.ft-prose-inner .mb-0 { margin-bottom: 0 !important; }
.ft-prose-inner .mb-1 { margin-bottom: .5rem; }
.ft-prose-inner .mb-2 { margin-bottom: 1rem; }
.ft-prose-inner .mb-3 { margin-bottom: 1.5rem; }
.ft-prose-inner .mb-4 { margin-bottom: 2rem; }
.ft-prose-inner .mb-5 { margin-bottom: 3rem; }
.ft-prose-inner .mt-3 { margin-top: 1.5rem; }
.ft-prose-inner .mt-4 { margin-top: 2rem; }
.ft-prose-inner .d-flex { display: flex; }
.ft-prose-inner .align-items-center { align-items: center; }
.ft-prose-inner .justify-content-center { justify-content: center; }
.ft-prose-inner .justify-content-between { justify-content: space-between; }
.ft-prose-inner .flex-wrap { flex-wrap: wrap; }
.ft-prose-inner .gap-3 { gap: 1rem; }

/* Inline CTAs inside CMS content — render on the white fintech body
   instead of the dark legacy pill, so contact.php / applied.php buttons
   match the surrounding hero+CTA design instead of looking out of place. */
.ft-prose-inner a.btn-primary,
.ft-prose-inner button.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0f1e3d; color: #fff !important;
  font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
  text-transform: none;
  padding: 13px 22px; border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none; box-shadow: none;
  transition: .18s ease;
}
.ft-prose-inner a.btn-primary:hover,
.ft-prose-inner button.btn-primary:hover {
  background: #1e3a8a; transform: translateY(-1px);
  box-shadow: 0 14px 28px -14px rgba(4,120,87,.55);
  color: #fff !important;
}
.ft-prose-inner a.btn-ghost,
.ft-prose-inner button.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #0f1e3d !important;
  border: 1px solid #d6dad6;
  font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
  text-transform: none;
  padding: 13px 22px; border-radius: 10px;
  text-decoration: none;
  transition: .18s ease;
}
.ft-prose-inner a.btn-ghost:hover,
.ft-prose-inner button.btn-ghost:hover {
  border-color: #0f1e3d; color: #0f1e3d !important;
}

/* Blockquote callouts on CMS pages — light theme */
.ft-prose-inner blockquote {
  border-left: 3px solid #1e40af;
  padding: 16px 22px; margin: 24px 0;
  background: #f7f8f7;
  border-radius: 0 12px 12px 0;
  font-style: normal; color: #0f1e3d; font-weight: 500;
  font-size: 16px; line-height: 1.6;
}
.ft-prose-inner blockquote strong { color: #1e40af; }

/* Mobile polish for CMS pages */
@media (max-width: 640px) {
  .ft-prose-inner .row { gap: 12px; margin: 14px 0; }
  .ft-prose-inner .feature-box,
  .ft-prose-inner .ibox { padding: 20px; }
  .ft-prose-inner .leader-card { padding: 18px; }
  .ft-prose-inner .faq-item summary { padding: 14px 16px; font-size: 14.5px; }
  .ft-prose-inner .faq-item .faq-body { padding: 12px 16px 16px; font-size: 14px; }
  .ft-prose-inner blockquote { padding: 14px 18px; font-size: 15px; }
  .ft-prose-inner a.btn-primary,
  .ft-prose-inner a.btn-ghost {
    display: flex; width: 100%; justify-content: center;
    white-space: normal;
  }
}