/* ==========================================================================
   Vip SchoolZ — Component Styles (Redesigned with vip-schoolz aesthetic)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO SECTION (overrides) — campus photo bg is set inline in HTML
   -------------------------------------------------------------------------- */
.hero-section::before { display: none; }

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: oklch(1 0 0 / 10%);
  border: 1px solid oklch(1 0 0 / 18%);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
  color: color-mix(in oklch, var(--hero-fg) 80%, transparent);
  text-transform: uppercase;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  flex-shrink: 0;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 oklch(0.48 0.1 162 / 40%); }
  70%  { box-shadow: 0 0 0 6px oklch(0.48 0.1 162 / 0%); }
  100% { box-shadow: 0 0 0 0 oklch(0.48 0.1 162 / 0%); }
}

.hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
  color: var(--hero-fg);
}

.hero-title .text-gradient {
  color: var(--highlight);
  -webkit-text-fill-color: var(--highlight);
}

.hero-description {
  font-size: 1rem;
  line-height: 1.75;
  color: color-mix(in oklch, var(--hero-fg) 78%, transparent);
  max-width: 500px;
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(1 0 0 / 15%);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in oklch, var(--hero-fg) 78%, transparent);
}
.trust-item svg { color: var(--highlight); flex-shrink: 0; }

/* Hero visual card */
.hero-visual-card {
  background: oklch(0.19 0.045 160 / 70%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(1 0 0 / 12%);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

.card-header-bar {
  background: oklch(0.15 0.04 160 / 80%);
  color: var(--text-inverse);
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid oklch(1 0 0 / 8%);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-header-brand { display: flex; align-items: center; gap: 0.6rem; }
.status-indicator { font-size: 0.875rem; color: var(--highlight); font-weight: 600; }

.institution-toggle-tabs { display: flex; gap: 0.3rem; }
.toggle-tab-btn {
  padding: 0.28rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  border: 1px solid oklch(1 0 0 / 12%);
  background: transparent;
  color: oklch(1 0 0 / 55%);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.toggle-tab-btn.active, .toggle-tab-btn:hover {
  background: oklch(1 0 0 / 12%);
  color: white;
  border-color: oklch(1 0 0 / 25%);
}

.card-body-metrics { padding: 1.25rem; }

.metric-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.metric-box {
  background: oklch(1 0 0 / 5%);
  border: 1px solid oklch(1 0 0 / 8%);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.9rem;
}

.metric-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: oklch(1 0 0 / 50%);
  margin-bottom: 0.25rem;
}

.metric-val {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--font-heading);
  color: white;
  line-height: 1.1;
}
.metric-val.trend-up { color: var(--highlight); }
.metric-sub { font-size: 0.875rem; color: oklch(1 0 0 / 42%); margin-top: 0.2rem; line-height: 1.4; }

.live-activity-box {
  background: oklch(1 0 0 / 5%);
  border: 1px solid oklch(1 0 0 / 8%);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.activity-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid oklch(1 0 0 / 8%);
  font-size: 0.875rem;
  font-weight: 700;
  color: oklch(1 0 0 / 65%);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.activity-list { padding: 0.2rem 0; }
.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  color: oklch(1 0 0 / 62%);
  border-bottom: 1px solid oklch(1 0 0 / 5%);
}
.activity-row:last-child { border-bottom: none; }
.activity-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. THE 5 THINGS THAT COST YOU
   -------------------------------------------------------------------------- */

/* Calculator styled as clean vip-schoolz product frame */

.slider-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.slider-group label span.val-display {
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 750;
  font-family: var(--font-heading);
}

.range-slider {
  width: 100%;
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 6px oklch(0.36 0.075 164 / 35%);
  transition: transform var(--transition-fast);
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. PERSONA SECTION
   -------------------------------------------------------------------------- */

.persona-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--border-medium);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  cursor: pointer;
}
.persona-tab-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--success-subtle);
}
.persona-tab-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 4px 14px oklch(0.36 0.075 164 / 25%);
}

/* Simulated screen styled as clean vip-schoolz product frame */

/* --------------------------------------------------------------------------
   4. FLAGSHIP PREMIUM MODULES
   -------------------------------------------------------------------------- */

/* AutoRoutine demo */

.routine-status-pill {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
}
.routine-status-pill.clash {
  background: oklch(0.65 0.22 25 / 20%);
  color: oklch(0.80 0.15 25);
  border: 1px solid oklch(0.65 0.22 25 / 40%);
}
.routine-status-pill.resolved {
  background: var(--success) / 0.2;
  background: oklch(0.48 0.1 162 / 20%);
  color: oklch(0.75 0.12 162);
  border: 1px solid oklch(0.48 0.1 162 / 40%);
}

/* RADAR demo styled as clean vip-schoolz product frame */

/* --------------------------------------------------------------------------
   5. PRICING
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. WHY US / COMPARISON TABLE
   -------------------------------------------------------------------------- */

/* Final CTA section — Brand teal-green from vip-schoolz */

/* --------------------------------------------------------------------------
   7. MODAL
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: oklch(0.12 0.035 165 / 75%);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-card {
  background: var(--surface-card);
  border-radius: var(--radius-2xl);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  position: relative;
  padding: 2.5rem;
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.3rem;
  color: var(--text-subtle);
  background: var(--surface-subtle);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.modal-close-btn:hover { background: oklch(0.97 0.025 15); color: oklch(0.56 0.22 15); }

/* --------------------------------------------------------------------------
   8. FOOTER — Clean, light, modern from vip-schoolz
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. RESPONSIVE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid > * { min-width: 0; }

  .hero-visual-card { max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 768px) {
  .hero-title { font-size: clamp(1.9rem, 7vw, 2.2rem); }
  .hero-pill-badge { font-size: 0.875rem; }
  .hero-cta-group .btn { width: 100%; }

  .card-header-bar { flex-wrap: wrap; gap: 0.75rem; padding: 0.9rem 1rem; }
  .card-body-metrics { padding: 1rem; }
  .metric-strip-grid { gap: 0.65rem; }
  .metric-val { font-size: 1.15rem; }
  .slider-group label { font-size: 0.875rem; }
  .range-slider { height: 32px; padding: 12px 0; background-clip: content-box; }
  .toggle-tab-btn { min-height: 30px; }
  .persona-tab-btn { flex: 0 0 auto; padding: 0.55rem 0.95rem; font-size: 0.875rem; }

  .modal-overlay { padding: 1rem; align-items: flex-start; }
  .modal-card { padding: 1.75rem 1.25rem; max-height: calc(100vh - 2rem); margin-top: 1rem; }
  .modal-close-btn { top: 0.85rem; right: 0.85rem; }
  #demoFormContainer > div:first-child { padding-right: 2.5rem; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 1.75rem; }
  .metric-strip-grid { grid-template-columns: 1fr; }
  .institution-toggle-tabs { width: 100%; }
  .toggle-tab-btn { flex: 1; text-align: center; }
  .activity-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* --------------------------------------------------------------------------
   Hero — vip-schoolz buttons: lime primary, outline secondary, sized to sit
   side by side on desktop
   -------------------------------------------------------------------------- */
.hero-cta-group .btn { height: 48px; padding: 0 22px; font-size: 0.875rem; }
.btn-hero { background: var(--highlight); color: var(--highlight-fg); border: 1px solid transparent; box-shadow: none; }
.btn-hero:hover { background: color-mix(in oklch, var(--highlight) 88%, white); color: var(--highlight-fg); transform: none; }
.btn-hero-outline { background: transparent; color: var(--hero-fg); border: 1px solid color-mix(in oklch, var(--hero-fg) 40%, transparent); box-shadow: none; }
.btn-hero-outline:hover { background: color-mix(in oklch, var(--hero-fg) 10%, transparent); color: var(--hero-fg); }
.metric-val-highlight { color: var(--highlight); }

/* Nothing on this page renders below 14px. */
small { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   vip-schoolz section system (sx-*). Shared by every restyled section:
   label with a short bar, heading, intro copy beside it on desktop.
   -------------------------------------------------------------------------- */
.sx-section { background: var(--background); border-bottom: 1px solid var(--border); }
.sx-section.alt { background: color-mix(in oklch, var(--surface-subtle) 60%, var(--background)); }
.sx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; margin-bottom: 2.75rem; }
.sx-head > div { max-width: 640px; }
.sx-head.center { flex-direction: column; align-items: center; text-align: center; }
.sx-label { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; color: var(--primary); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.sx-label::before { content: ""; width: 20px; height: 2px; background: currentColor; flex-shrink: 0; }
.sx-head.center .sx-label { justify-content: center; }
.sx-heading { font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.25; font-weight: 750; color: var(--text-main); }
.sx-copy { max-width: 420px; color: var(--text-muted); font-size: 1rem; line-height: 1.8; }
.sx-head.center .sx-copy { max-width: 620px; }
.sx-icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Trust strip */
.sx-trust { background: color-mix(in oklch, var(--surface-subtle) 55%, var(--background)); border-bottom: 1px solid var(--border); }
.sx-trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-block: 1.6rem; }
.sx-trust-lead { font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }
.sx-trust-lead strong { color: var(--text-main); }
.sx-trust-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 650; color: var(--text-main); }
.sx-trust-item .sx-icon { color: color-mix(in oklch, var(--primary) 70%, transparent); }

/* Platform cards */
.sx-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sx-card { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card, #fff); transition: border-color .2s, transform .2s; }
.sx-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.sx-card-icon { width: 44px; height: 44px; margin-bottom: 1.5rem; border-radius: 8px; display: grid; place-items: center; background: var(--success-subtle); color: var(--primary); }
.sx-card-icon.warm { background: var(--warm-subtle); color: var(--warm); }
.sx-card-tag { margin-bottom: 0.6rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.sx-card h3 { margin-bottom: 0.7rem; font-size: 1.15rem; line-height: 1.35; font-weight: 700; color: var(--text-main); }
.sx-card-copy { flex-grow: 1; font-size: 0.9rem; line-height: 1.75; color: var(--text-muted); }
.sx-card-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; font-size: 0.875rem; font-weight: 650; color: var(--primary); }
.sx-card-link .sx-icon { width: 15px; height: 15px; }
.sx-card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
body.lang-bn .sx-label, body.lang-bn .sx-card-tag { text-transform: none; letter-spacing: 0; }

@media (max-width: 1024px) { .sx-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .sx-head { flex-direction: column; align-items: flex-start; margin-bottom: 2rem; }
  .sx-trust-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .sx-card-grid { grid-template-columns: 1fr; } .sx-card { padding: 1.4rem; } }

/* Section 3 — five problems + paper cost calculator */
.sx-problem-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.sx-problem-grid > .sx-problem { grid-column: span 2; }
.sx-problem-grid > .sx-problem:nth-child(4), .sx-problem-grid > .sx-problem:nth-child(5) { grid-column: span 3; }
.sx-num { font-family: var(--font-heading, inherit); font-size: 0.95rem; font-weight: 800; }
.sx-problem h3 { margin-bottom: 0.7rem; font-size: 1.15rem; line-height: 1.35; font-weight: 700; color: var(--text-main); }
.sx-problem-tag { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.875rem; font-weight: 650; line-height: 1.6; color: var(--primary); }

.sx-calc { margin-top: 3.5rem; border-radius: 12px; background: var(--primary); color: var(--primary-fg, #fff); }
.sx-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding: 2.75rem; }
.sx-calc .sx-label { color: var(--highlight); }
.sx-calc-title { font-size: 1.75rem; line-height: 1.3; font-weight: 750; color: #fff; }
.sx-calc-lead { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.8; color: color-mix(in oklch, #fff 74%, transparent); }
.sx-calc .slider-group { margin-top: 1.75rem; }
.sx-calc .slider-group label { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 600; color: #fff; }
.sx-calc .val-display { font-weight: 750; color: var(--highlight); }
.sx-calc .range-slider { background-color: color-mix(in oklch, #fff 25%, transparent); }
.sx-calc-results { padding: 1.75rem; border-radius: 8px; background: var(--surface-card, #fff); color: var(--text-main); }
.sx-calc-result-label { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
body.lang-bn .sx-calc-result-label { text-transform: none; letter-spacing: 0; }
.sx-calc-total { margin-top: 0.4rem; font-size: 2.1rem; line-height: 1.2; font-weight: 800; color: oklch(0.55 0.19 25); }
.sx-calc-rows { margin-top: 1.1rem; border-top: 1px solid var(--border); }
.sx-calc-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); }
.sx-calc-row strong { white-space: nowrap; color: var(--text-main); }
.sx-calc-note { margin-top: 1.1rem; padding: 0.85rem 0.9rem; border-radius: 6px; background: var(--success-subtle); font-size: 0.9rem; line-height: 1.7; color: var(--primary); }
.sx-btn-block { width: 100%; justify-content: center; margin-top: 1.1rem; gap: 0.5rem; }
.sx-btn-block .sx-icon { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .sx-problem-grid { grid-template-columns: 1fr 1fr; }
  .sx-problem-grid > .sx-problem, .sx-problem-grid > .sx-problem:nth-child(4) { grid-column: auto; }
  .sx-problem-grid > .sx-problem:nth-child(5) { grid-column: 1 / -1; }
  .sx-calc-grid { grid-template-columns: 1fr; padding: 2rem; }
}
@media (max-width: 560px) {
  .sx-problem-grid { grid-template-columns: 1fr; }
  .sx-problem-grid > .sx-problem:nth-child(5) { grid-column: auto; }
  .sx-calc-grid { padding: 1.5rem 1.1rem; }
  .sx-calc-title { font-size: 1.45rem; }
  .sx-calc-total { font-size: 1.75rem; }
}
.sx-calc .slider-group label span.val-display { color: var(--highlight); }
.sx-calc .range-slider::-webkit-slider-thumb { background: var(--highlight); box-shadow: 0 0 0 3px var(--primary), 0 0 0 4px var(--highlight); }
.sx-calc .range-slider::-moz-range-thumb { background: var(--highlight); }
.sx-calc-assumptions { margin-top: 0.9rem; font-size: 0.875rem; line-height: 1.7; color: var(--text-muted); }
.sx-calc-assumptions strong { color: var(--text-main); }

/* Section 4 — who it's for: role tabs, role summary, example dashboard */
.sx-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.sx-tab { display: inline-flex; align-items: center; gap: 0.5rem; height: 42px; padding: 0 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card, #fff); font-size: 0.9rem; font-weight: 600; color: var(--text-muted); transition: color .15s, border-color .15s, background-color .15s; }
.sx-tab .sx-icon { width: 17px; height: 17px; }
.sx-tab:hover { color: var(--primary); border-color: var(--primary); }
.sx-tab.active { background: var(--primary); border-color: var(--primary); color: var(--primary-fg, #fff); }
.sx-persona { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }
.sx-persona-info h3 { font-size: 1.6rem; font-weight: 750; color: var(--text-main); }
.sx-persona-line { margin-top: 0.75rem; padding-left: 0.9rem; border-left: 3px solid var(--highlight); font-size: 1.05rem; line-height: 1.7; color: var(--text-main); }
.sx-points { display: grid; gap: 1.1rem; margin: 1.6rem 0 1.75rem; }
.sx-point { display: flex; gap: 0.75rem; }
.sx-point .sx-icon { margin-top: 2px; color: var(--success, var(--primary)); }
.sx-point strong { display: block; font-size: 1rem; color: var(--text-main); }
.sx-point p { margin-top: 0.25rem; font-size: 0.925rem; line-height: 1.75; color: var(--text-muted); }
.sx-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.sx-btn .sx-icon { width: 16px; height: 16px; }

.sx-frame { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-card, #fff); box-shadow: 0 12px 40px oklch(0.23 0.04 160 / 8%); overflow: hidden; }
.sx-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--border); }
.sx-frame-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 650; color: var(--text-main); }
.sx-frame-title .sx-icon { width: 17px; height: 17px; color: var(--primary); }
.sx-tag { padding: 0.3rem 0.6rem; border-radius: 5px; background: var(--success-subtle); color: var(--primary); font-size: 0.875rem; font-weight: 650; white-space: nowrap; }
.sx-frame-body { padding: 1.25rem; }
.sx-frame-status { margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-muted); }
.sx-metrics { display: grid; gap: 0.75rem; }
.sx-metric { padding: 1rem 1.1rem; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 8px; background: color-mix(in oklch, var(--surface-subtle) 45%, #fff); }
.sx-metric-label { font-size: 0.875rem; color: var(--text-muted); }
.sx-metric-val { margin-top: 0.2rem; font-family: var(--font-heading, inherit); font-size: 1.45rem; font-weight: 750; line-height: 1.25; color: var(--text-main); }
body.lang-bn .sx-metric-val { font-family: inherit; }
.sx-metric-sub { margin-top: 0.2rem; font-size: 0.875rem; color: var(--primary); }

@media (max-width: 900px) { .sx-persona { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 560px) {
  .sx-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem 0.25rem; scrollbar-width: none; }
  .sx-tabs::-webkit-scrollbar { display: none; }
  .sx-tab { flex-shrink: 0; }
  .sx-frame-bar { flex-wrap: wrap; }
}

/* Section 5 — AutoRoutine & RADAR rows */
:root { --sx-danger: oklch(0.58 0.19 22); --sx-danger-subtle: oklch(0.96 0.03 22); }
.sx-flagship { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.sx-flagship + .sx-flagship { margin-top: 5rem; padding-top: 5rem; border-top: 1px solid var(--border); }
.sx-flagship-info h3 { font-size: 1.75rem; line-height: 1.3; font-weight: 750; color: var(--text-main); }
.sx-flagship-info .sx-card-icon { margin-bottom: 1.25rem; }
.sx-label.warm { color: var(--warm); }
.sx-flagship-lead { margin-top: 0.85rem; font-size: 1rem; line-height: 1.8; color: var(--text-muted); }
.sx-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.4rem; margin: 1.5rem 0; }
.sx-feat { padding-left: 0.8rem; border-left: 2px solid var(--success-subtle); }
.sx-feats.warm .sx-feat { border-left-color: var(--warm-subtle); }
.sx-feat strong { display: block; font-size: 0.95rem; color: var(--text-main); }
.sx-feat span { display: block; margin-top: 0.25rem; font-size: 0.9rem; line-height: 1.7; color: var(--text-muted); }
.sx-note { margin-bottom: 0.4rem; font-size: 0.875rem; color: var(--text-muted); }

.sx-frame-sub { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); }
.sx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sx-timetable { width: 100%; min-width: 440px; border-collapse: separate; border-spacing: 0 6px; font-size: 0.9rem; }
.sx-timetable th { padding: 0.3rem 0.75rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.sx-timetable td { padding: 0.75rem; background: var(--success-subtle); vertical-align: top; color: var(--text-main); }
.sx-timetable td:first-child { border-radius: 6px 0 0 6px; font-weight: 600; }
.sx-timetable td:last-child { border-radius: 0 6px 6px 0; }
.sx-timetable td strong { display: block; font-weight: 650; }
.sx-timetable td small { display: block; margin-top: 2px; color: var(--text-muted); }
.sx-timetable tr.is-clash td { background: var(--sx-danger-subtle); }
.sx-timetable tr.is-clash td small { color: var(--sx-danger); font-weight: 650; }
.sx-timetable tr.is-fixed td { background: color-mix(in oklch, var(--highlight) 30%, white); }
.sx-timetable tr.is-fixed td small { color: var(--primary); font-weight: 650; }
.routine-status-pill { display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; border-radius: 5px; font-size: 0.875rem; font-weight: 650; white-space: nowrap; }
.routine-status-pill.clash { background: var(--sx-danger-subtle); color: var(--sx-danger); }
.routine-status-pill.resolved { background: var(--success-subtle); color: var(--primary); }
.sx-routine-msg { margin: 0.9rem 0 1rem; padding: 0.8rem 0.9rem; border-radius: 6px; background: color-mix(in oklch, var(--surface-subtle) 70%, white); font-size: 0.9rem; line-height: 1.7; color: var(--text-main); }
.sx-word-clash { color: var(--sx-danger); }
.sx-word-ok { color: var(--primary); }
.sx-btn-full { width: 100%; justify-content: center; }

.sx-student { font-size: 1.1rem; font-weight: 700; color: var(--text-main); }
.sx-student-meta { margin-top: 0.2rem; font-size: 0.9rem; color: var(--text-muted); }
.sx-risk-toggle { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.1rem 0 0.5rem; }
.sx-risk-toggle .radar-risk-toggle-btn { height: 36px; padding: 0 0.8rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-card, #fff); font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.sx-risk-toggle .radar-risk-toggle-btn:hover { border-color: var(--primary); color: var(--primary); }
.sx-risk-toggle .radar-risk-toggle-btn.active { background: var(--text-main); border-color: var(--text-main); color: #fff; }
.sx-signal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-main); }
.sx-signal > strong { justify-self: start; font-size: 0.9rem; }
.sx-signal-meter { display: flex; align-items: center; gap: 0.7rem; }
.sx-signal-meter strong { font-size: 0.875rem; white-space: nowrap; }
.sx-signal-bar { flex: 1; min-width: 60px; height: 8px; border-radius: 999px; background: var(--surface-subtle); overflow: hidden; }
.sx-signal-fill { height: 100%; width: 0; border-radius: 999px; transition: width .4s ease, background-color .3s; }
.sx-radar-alert { margin-top: 0.9rem; padding: 0.85rem 0.95rem; border-left: 3px solid var(--warm); border-radius: 6px; background: var(--warm-subtle); font-size: 0.9rem; line-height: 1.7; color: var(--text-main); }

@media (max-width: 960px) {
  .sx-flagship { grid-template-columns: 1fr; gap: 2rem; }
  .sx-flagship.reverse .sx-frame { order: 2; }
  .sx-flagship:not(.reverse) .sx-frame { order: 2; }
}
@media (max-width: 560px) {
  .sx-feats { grid-template-columns: 1fr; }
  .sx-flagship + .sx-flagship { margin-top: 3rem; padding-top: 3rem; }
  .sx-flagship-info h3 { font-size: 1.45rem; }
  .sx-signal { grid-template-columns: 1fr; gap: 0.4rem; }
}
@media (max-width: 560px) {
  .sx-timetable { min-width: 0; table-layout: fixed; font-size: 0.875rem; }
  .sx-timetable td, .sx-timetable th { padding: 0.6rem 0.5rem; }
  .sx-timetable th:last-child, .sx-timetable td:last-child { width: 24%; }
}

/* Section 6 — pricing */
.sx-pricing-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-bottom: 2.25rem; }
.sx-capacity { display: flex; align-items: center; gap: 1rem; flex: 0 1 520px; padding: 0.6rem 1.1rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-card, #fff); }
.sx-capacity label { font-size: 0.9rem; font-weight: 600; color: var(--text-main); white-space: nowrap; }
.sx-capacity .range-slider { flex: 1; }
.sx-capacity-val { font-size: 1rem; font-weight: 750; color: var(--primary); white-space: nowrap; }

.sx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.sx-plan { position: relative; display: flex; flex-direction: column; padding: 1.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-card, #fff); }
.sx-plan.featured { border: 2px solid var(--primary); background: var(--success-subtle); }
.sx-plan-badge { position: absolute; top: -13px; left: 1.5rem; padding: 0.25rem 0.7rem; border-radius: 5px; background: var(--primary); color: var(--primary-fg, #fff); font-size: 0.875rem; font-weight: 650; }
.sx-plan h3 { font-size: 1.25rem; font-weight: 750; color: var(--text-main); }
.sx-plan-tagline { margin-top: 0.5rem; min-height: 4.95em; font-size: 0.925rem; line-height: 1.65; color: var(--text-muted); }
.sx-plan-price { display: flex; align-items: baseline; gap: 0.2rem; margin-top: 1.4rem; }
.sx-plan-currency { font-size: 1.5rem; font-weight: 750; color: var(--text-main); }
.sx-plan-number { font-family: var(--font-heading, inherit); font-size: 2.75rem; line-height: 1; font-weight: 800; color: var(--text-main); }
body.lang-bn .sx-plan-number { font-family: inherit; }
.sx-plan-unit { margin-top: 0.4rem; font-size: 0.875rem; color: var(--text-muted); }
.sx-plan-total { margin: 0.6rem 0 1.25rem; font-size: 0.95rem; font-weight: 650; color: var(--primary); }
.sx-plan-feats { display: grid; gap: 0.75rem; margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--border); list-style: none; }
.sx-plan-feat { display: flex; gap: 0.55rem; font-size: 0.925rem; line-height: 1.55; color: var(--text-main); }
.sx-plan-feat .sx-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--success, var(--primary)); stroke-width: 2.6; }
.sx-plan-feat.hl { color: var(--primary); }

.sx-standalone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 1.75rem; padding: 1.4rem 1.6rem; border: 1px dashed color-mix(in oklch, var(--primary) 40%, var(--border)); border-radius: 10px; background: var(--surface-card, #fff); }
.sx-standalone h4 { font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.sx-standalone p { margin-top: 0.3rem; font-size: 0.925rem; color: var(--text-muted); }
.sx-standalone-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sx-standalone-chip { padding: 0.55rem 0.8rem; border-radius: 7px; background: var(--success-subtle); }
.sx-standalone-chip strong { display: block; font-size: 0.875rem; color: var(--text-main); }
.sx-standalone-chip span { font-size: 0.9rem; font-weight: 700; color: var(--primary); }

@media (max-width: 1000px) { .sx-plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .sx-plan-tagline { min-height: 0; } }
@media (max-width: 560px) {
  .sx-capacity { flex-wrap: wrap; flex-basis: 100%; }
  .sx-capacity .range-slider { flex-basis: 100%; order: 3; }
  .sx-plan { padding: 1.5rem 1.25rem; }
  .sx-standalone { padding: 1.25rem; }
}

/* Section 7 — our promise + comparison */
.sx-promise-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
.sx-promise-grid .sx-card-icon { margin-bottom: 1.25rem; }
.sx-promise-copy { margin-top: 1rem; }
.sx-promises { display: grid; }
.sx-promise { display: flex; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--border); }
.sx-promise:first-child { padding-top: 0.25rem; }
.sx-promise > .sx-icon { margin-top: 3px; color: var(--primary); }
.sx-promise h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.sx-promise p { margin-top: 0.3rem; font-size: 0.925rem; line-height: 1.7; color: var(--text-muted); }

.sx-compare { margin-top: 3.5rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-card, #fff); }
.sx-compare-head, .sx-compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.sx-compare-head span { padding: 0.95rem 1.4rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
body.lang-bn .sx-compare-head span { text-transform: none; letter-spacing: 0; }
.sx-compare-head span:first-child { background: var(--surface-subtle); color: var(--text-muted); }
.sx-compare-head span:last-child { background: var(--primary); color: var(--primary-fg, #fff); }
.sx-compare-row { border-top: 1px solid var(--border); }
.sx-compare-bad, .sx-compare-good { display: flex; gap: 0.75rem; padding: 1.25rem 1.4rem; font-size: 0.925rem; line-height: 1.7; }
.sx-compare-bad { background: color-mix(in oklch, var(--surface-subtle) 45%, #fff); color: var(--text-muted); }
.sx-compare-bad .sx-icon { margin-top: 3px; color: var(--sx-danger); }
.sx-compare-good { color: var(--text-main); }
.sx-compare-good .sx-icon { margin-top: 3px; color: var(--primary); }
.sx-compare strong { color: var(--text-main); }

@media (max-width: 900px) { .sx-promise-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 700px) {
  .sx-compare-head { display: none; }
  .sx-compare-row { grid-template-columns: 1fr; }
  .sx-compare-bad, .sx-compare-good { padding: 1rem 1.1rem; }
}

/* Section 8 — final call to action + footer */
.sx-cta { background: var(--primary); color: var(--primary-fg, #fff); }
.sx-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 4rem; }
.sx-cta-eyebrow { margin-bottom: 0.75rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--highlight); }
body.lang-bn .sx-cta-eyebrow { text-transform: none; letter-spacing: 0; }
.sx-cta h2 { max-width: 640px; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.3; font-weight: 750; color: #fff; }
.sx-cta-desc { max-width: 620px; margin-top: 0.75rem; font-size: 1rem; line-height: 1.8; color: color-mix(in oklch, #fff 75%, transparent); }
.sx-cta-actions { display: flex; flex-direction: column; gap: 0.6rem; flex-shrink: 0; }
.sx-cta-actions .btn { justify-content: center; }

.sx-footer { padding-block: 3.5rem 1.75rem; background: var(--background); }
.sx-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.sx-footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.sx-footer-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--primary); color: var(--primary-fg, #fff); }
.sx-footer-mark .sx-icon { width: 22px; height: 22px; }
.sx-footer-name { display: block; font-family: var(--font-heading, inherit); font-size: 1.3rem; font-weight: 800; line-height: 1.1; color: var(--text-main); }
.sx-footer-name span { color: var(--primary); }
.sx-footer-tagline { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.sx-footer-text { max-width: 290px; margin-top: 1.1rem; font-size: 0.925rem; line-height: 1.75; color: var(--text-muted); }
.sx-footer-col h4 { margin-bottom: 1rem; font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.sx-footer-col ul { display: grid; gap: 0.6rem; list-style: none; }
.sx-footer-col a, .sx-footer-col p { font-size: 0.925rem; line-height: 1.7; color: var(--text-muted); }
.sx-footer-col a:hover { color: var(--primary); }
.sx-footer-col p + p { margin-top: 0.6rem; }
.sx-footer-col .sx-card-link { margin-top: 0.9rem; color: var(--primary); }
.sx-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem; margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .sx-cta-inner { flex-direction: column; align-items: flex-start; padding-block: 3rem; }
  .sx-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sx-cta-actions, .sx-cta-actions .btn { width: 100%; }
  .sx-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Demo request form */
.sx-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; background: oklch(0.15 0.03 160 / 55%); backdrop-filter: blur(3px); }
.sx-modal.open { display: flex; }
.sx-modal-card { position: relative; width: min(580px, 100%); max-height: 92dvh; overflow-y: auto; padding: 1.9rem; border-radius: 12px; background: var(--surface-card, #fff); box-shadow: 0 24px 60px oklch(0.15 0.04 160 / 28%); }
.sx-modal-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); background: none; border: 0; cursor: pointer; }
.sx-modal-close:hover { background: var(--surface-subtle); color: var(--text-main); }
.sx-modal-card h3 { font-size: 1.4rem; font-weight: 750; line-height: 1.3; color: var(--text-main); padding-right: 2rem; }
.sx-modal-desc { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); }
.sx-form { display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.sx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.sx-field { display: grid; gap: 0.35rem; }
.sx-field label { font-size: 0.9rem; font-weight: 650; color: var(--text-main); }
.sx-field input, .sx-field select { width: 100%; height: 44px; padding: 0 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--background); font: inherit; font-size: 0.95rem; color: var(--text-main); outline: none; transition: border-color .15s, box-shadow .15s; }
.sx-field input:focus, .sx-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 15%, transparent); }
.sx-honeypot { position: absolute; left: -9999px; }
.sx-form-actions { display: grid; gap: 0.6rem; margin-top: 0.3rem; }
.sx-form-actions .btn { width: 100%; justify-content: center; }
.sx-btn-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: oklch(0.6 0.15 150); color: #fff; border: 0; }
.sx-btn-whatsapp:hover { background: oklch(0.54 0.15 150); color: #fff; }
.sx-btn-whatsapp .sx-icon { width: 17px; height: 17px; }
.sx-form-note { font-size: 0.875rem; color: var(--text-muted); text-align: center; }

.sx-result { padding: 0.5rem 0; text-align: center; }
.sx-result-icon { width: 56px; height: 56px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--success-subtle); color: var(--primary); }
.sx-result-icon.warn { background: var(--warm-subtle); color: var(--warm); }
.sx-result-icon .sx-icon { width: 28px; height: 28px; }
.sx-result h3 { padding-right: 0; }
.sx-result p { margin: 0.7rem 0 1.3rem; font-size: 0.95rem; line-height: 1.75; color: var(--text-muted); }
.sx-result .btn { width: 100%; }

@media (max-width: 560px) {
  .sx-form-row { grid-template-columns: 1fr; }
  .sx-modal-card { padding: 1.4rem 1.1rem; }
}