/* ================================================================
   SSP Senarai Semak Perkembangan — Mobile-First CSS v8
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#ssp-wrap {
  font-family: 'Nunito', sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 60px;
  font-size: 15px;
  color: #0d2d3a;
  -webkit-text-size-adjust: 100%;
}

/* ── HERO ── */
.ssp-hero {
  background: linear-gradient(135deg, #0a648a 0%, #08506e 55%, #063d54 80%, #0a5070 100%);
  border-radius: 0 0 24px 24px;
  padding: 28px 20px 32px;
  text-align: center;
  margin-bottom: 20px;
}
.ssp-hero-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ssp-hero-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
  flex-shrink: 0;
}
.ssp-hero-title-wrap {
  text-align: left;
}
.ssp-hero-sitename {
  color: #e3be55;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.ssp-hero-tagline {
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.ssp-hero h2 { color: #fff; font-size: 20px; font-weight: 800; margin-bottom: 6px; line-height: 1.3; }
.ssp-hero p  { color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.5; }

/* ── STEP INDICATOR ── */
.ssp-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 16px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ssp-step {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #8ab4c4;
  white-space: nowrap;
  flex-shrink: 0;
}
.ssp-step span {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #c8dde8;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: #8ab4c4;
  flex-shrink: 0;
}
.ssp-step.active { color: #0a648a; }
.ssp-step.active span { background: #e3be55; color: #063d54; }
.ssp-step.done { color: #28a745; }
.ssp-step.done span { background: #28a745; color: #fff; }
.ssp-step-line { flex: 1; height: 2px; background: #c8dde8; min-width: 12px; max-width: 48px; }

/* ── CARD ── */
.ssp-card {
  background: #fff;
  border: 1.5px solid #c8dfe8;
  border-radius: 18px;
  padding: 20px 16px;
  margin: 0 12px 16px;
  box-shadow: 0 2px 16px rgba(232,80,10,.07);
}
.ssp-hidden { display: none !important; }

.ssp-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #0d2d3a;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ssp-num {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: #e3be55;
  color: #fff;
  font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── FORM FIELDS ── */
.ssp-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.ssp-field { margin-bottom: 12px; }
.ssp-field label, .ssp-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #1a4a5a;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.req { color: #0a648a; }
.ssp-field-hint { display: block; font-size: 11px; color: #4a7d90; margin-top: 4px; }

.ssp-field input[type="text"],
.ssp-field input[type="email"],
.ssp-field select,
.ssp-field textarea {
  width: 100%;
  border: 1.5px solid #b8d4e0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: 'Nunito', sans-serif;
  color: #0d2d3a;
  background: #f7fbfd;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px; /* touch target */
}
.ssp-field input:focus,
.ssp-field select:focus,
.ssp-field textarea:focus {
  outline: none;
  border-color: #0a648a;
  box-shadow: 0 0 0 3px rgba(232,80,10,.12);
  background: #fff;
}
.ssp-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23e8500a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.ssp-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

/* ── USIA BOX ── */
.ssp-usia-box {
  background: #f4fafc;
  border: 1.5px solid #c8dfe8;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.ssp-usia-label {
  font-size: 11px; font-weight: 700; color: #4a7d90;
  text-transform: uppercase; letter-spacing: .7px;
  margin-bottom: 10px;
}
.ssp-usia-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ssp-usia-pill {
  background: #e3be55; color: #063d54;
  font-size: 14px; font-weight: 800;
  padding: 6px 16px;
  border-radius: 50px;
}
.ssp-peringkat-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #e3be55;
  border-radius: 50px; padding: 7px 14px;
  font-size: 13px; font-weight: 700; color: #0a648a;
}

/* ── DOMAIN TABS ── */
.ssp-domain-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 14px;
  /* snap scrolling for mobile swipe */
  scroll-snap-type: x proximity;
}
.ssp-domain-tabs::-webkit-scrollbar { display: none; }

.ssp-dtab {
  border: 1.5px solid #b8d4e0;
  background: #fff;
  border-radius: 50px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 700;
  color: #4a7d90;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
  transition: all .15s;
  scroll-snap-align: start;
}
.ssp-dtab:hover, .ssp-dtab:active { border-color: #0a648a; color: #0a648a; }
.ssp-dtab.active { background: #0a648a; border-color: #0a648a; color: #fff; }
.ssp-dtab.active { background: linear-gradient(135deg, #0a648a, #0d7aa8); }
.ssp-dtab.ssp-dtab-done:not(.active) { border-color: #28a745; color: #28a745; background: #f0fff4; }

/* ── DOMAIN PANEL ── */
.ssp-domain-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: #eef6fa;
  border-radius: 12px 12px 0 0;
  font-size: 13px; font-weight: 700; color: #08506e;
  border: 1.5px solid #c8dfe8;
  border-bottom: none;
}
.ssp-mini-prog { font-size: 12px; font-weight: 800; color: #0a648a; }

/* ── CHECKLIST ── */
.ssp-checklist-header {
  display: grid;
  grid-template-columns: 28px 1fr 52px;
  gap: 6px;
  padding: 8px 12px;
  background: #f4fafc;
  font-size: 11px; font-weight: 700; color: #4a7d90;
  border: 1.5px solid #c8dfe8;
  border-top: none;
  border-bottom: none;
}
/* hide tarikh & catatan headers on mobile — shown inline on row */
.ssp-checklist-header span:nth-child(4),
.ssp-checklist-header span:nth-child(5) { display: none; }

.ssp-cl-item {
  display: grid;
  grid-template-columns: 28px 1fr 52px;
  gap: 6px;
  padding: 12px 12px 8px;
  border: 1.5px solid #c8dfe8;
  border-top: none;
  background: #fff;
  align-items: start;
  transition: background .15s;
}
.ssp-cl-item:last-child { border-radius: 0 0 12px 12px; }
.ssp-cl-item:nth-child(even) { background: #f7fbfd; }

/* On mobile, tarikh + catatan go below perkara text in their own row */
.ssp-cl-bottom {
  grid-column: 2 / 4;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ssp-cl-bottom input {
  flex: 1;
  border: 1.5px solid #b8d4e0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  color: #0d2d3a;
  background: #fff;
  min-height: 40px;
  -webkit-appearance: none;
}
.ssp-cl-bottom input:focus {
  outline: none; border-color: #0a648a;
  box-shadow: 0 0 0 2px rgba(232,80,10,.1);
}
.ssp-cl-bottom input::placeholder { color: #8ab4c4; font-size: 12px; }

.ssp-cl-num {
  font-size: 11px; font-weight: 800; color: #0a648a;
  padding-top: 3px; text-align: center;
}
.ssp-cl-text { font-size: 14px; color: #0d2d3a; line-height: 1.45; }

/* Checkbox — large touch target */
.ssp-cl-ya {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 2px;
}
.ssp-ya-checkbox {
  width: 28px; height: 28px;
  border: 2px solid #b8d4e0;
  border-radius: 8px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  flex-shrink: 0;
  transition: all .15s;
  position: relative;
}
.ssp-ya-checkbox:checked {
  background: #0a648a;
  border-color: #0a648a;
}
.ssp-ya-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 5px; left: 8px;
  width: 6px; height: 11px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* ── OVERALL PROGRESS ── */
.ssp-overall-progress {
  background: #f4fafc;
  border: 1.5px solid #c8dfe8;
  border-radius: 14px;
  padding: 14px;
  margin-top: 16px;
}
.ssp-overall-label {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: #1a3d4d;
  margin-bottom: 8px;
}
#ssp-overall-pct { color: #0a648a; font-size: 16px; font-weight: 900; }

/* ── PROGRESS BAR ── */
.ssp-progress-bar {
  height: 8px;
  background: #c8dfe8;
  border-radius: 50px;
  overflow: hidden;
}
.ssp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a648a, #e3be55);
  border-radius: 50px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* ── BUTTONS ── */
.ssp-btn {
  display: block;
  width: 100%;
  border: none;
  background: #0a648a;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  padding: 15px 20px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s;
  margin-top: 10px;
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: .2px;
}
.ssp-btn:active { transform: scale(.97); }
.ssp-btn:hover  { background: #08506e; }

.ssp-btn-outline {
  background: transparent;
  border: 2px solid #0a648a;
  color: #0a648a;
}
.ssp-btn-outline:hover, .ssp-btn-outline:active { background: #eef6fa; }

.ssp-btn-row { display: flex; gap: 10px; margin-top: 14px; }
.ssp-btn-row .ssp-btn { flex: 1; }

/* ── INFO BAR ── */
.ssp-info-bar {
  background: #eef6fa;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1a4d60;
  margin-bottom: 14px;
  line-height: 1.5;
}
.ssp-info-bar span { font-weight: 700; color: #08506e; }

/* ── ERROR ── */
.ssp-error {
  color: #c0392b;
  font-size: 13px;
  padding: 8px 0 2px;
  font-weight: 600;
  display: none;
}
.ssp-error.show { display: block; }

/* ── SUMMARY ── */
.ssp-summary-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.ssp-summary-meta div {
  background: #f4fafc;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid #c8dfe8;
}
.ssp-summary-meta label {
  display: block;
  font-size: 10px;
  color: #4a7d90;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
}
.ssp-summary-meta strong { font-size: 13px; color: #0d2d3a; word-break: break-word; }

.ssp-sum-overall {
  text-align: center;
  padding: 16px;
  background: #eef6fa;
  border-radius: 14px;
  margin-bottom: 14px;
}
.ssp-pct-big { font-size: 42px; font-weight: 900; color: #0a648a; line-height: 1; }
.ssp-pct-big + small { font-size: 13px; color: #4a7d90; display: block; margin-top: 4px; }

.ssp-sum-domains { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ssp-sum-domain {
  background: #f4fafc;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1.5px solid #c8dfe8;
}
.ssp-sum-domain-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700; color: #0d2d3a;
  margin-bottom: 6px;
}
.ssp-sum-pct { font-size: 12px; color: #0a648a; font-weight: 800; }
.ssp-sum-kesimpulan {
  padding: 12px 14px;
  background: #f4fafc;
  border-left: 4px solid #0a648a;
  border-radius: 8px;
  font-size: 13px; margin-top: 8px; line-height: 1.6;
}

/* ── SUCCESS ── */
.ssp-success-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a648a, #e3be55);
  color: #fff;
  font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  margin: 4px auto 16px;
  box-shadow: 0 4px 16px rgba(40,167,69,.3);
}

/* ── TABLET / DESKTOP ── */
@media (min-width: 520px) {
  .ssp-hero { border-radius: 18px; margin: 12px 12px 20px; padding: 32px 28px 36px; }
  .ssp-card { padding: 24px 22px; margin: 0 0 16px; }
  .ssp-hero h2 { font-size: 23px; }

  /* Show tarikh & catatan headers on larger screens */
  .ssp-checklist-header {
    grid-template-columns: 28px 1fr 52px 120px 1fr;
  }
  .ssp-checklist-header span:nth-child(4),
  .ssp-checklist-header span:nth-child(5) { display: block; }

  /* Show tarikh + catatan inline on larger screens */
  .ssp-cl-item {
    grid-template-columns: 28px 1fr 52px 120px 1fr;
    align-items: center;
    padding: 10px 12px;
  }
  .ssp-cl-bottom { display: none; }
  .ssp-cl-tarikh-desk, .ssp-cl-catatan-desk { display: block; }

  .ssp-steps { font-size: 12px; }
  .ssp-step { gap: 6px; font-size: 12px; }
  .ssp-step span { width: 26px; height: 26px; font-size: 12px; }
}

@media (max-width: 519px) {
  .ssp-cl-tarikh-desk, .ssp-cl-catatan-desk { display: none; }
  .ssp-field-group { grid-template-columns: 1fr; }
  .ssp-summary-meta { grid-template-columns: 1fr; }
  .ssp-step-line { min-width: 8px; max-width: 24px; }
}

/* ── ARAHAN ── */
.ssp-arahan {
  background: #f4fafc;
  border: 1.5px solid #c8dfe8;
  border-left: 4px solid #e3be55;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ssp-arahan p {
  font-size: 13px;
  color: #1a3d4d;
  line-height: 1.65;
  margin: 0;
}
.ssp-arahan strong { color: #08506e; }
.ssp-arahan u { text-decoration-color: #0a648a; }
@media (min-width: 520px) {
  .ssp-arahan { margin: 0 0 18px; }
  .ssp-arahan p { font-size: 14px; }
}

/* ================================================================
   SSP LANDING PAGE BEAUTIFUL UI
   ================================================================ */
.ssp-landing{font-family:Arial,Helvetica,sans-serif;color:#0b3041;max-width:1180px;margin:0 auto;padding:18px}
.ssp-landing *{box-sizing:border-box}
.ssp-landing-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center;background:linear-gradient(135deg,#e9fbff 0%,#fff8d7 55%,#ffffff 100%);border-radius:30px;padding:42px;box-shadow:0 18px 55px rgba(8,80,110,.12);overflow:hidden;position:relative}
.ssp-landing-hero:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,203,5,.35);right:-80px;top:-80px}
.ssp-landing-hero-text{position:relative;z-index:1}
.ssp-badge{display:inline-block;background:#ffcb05;color:#063d54;font-weight:800;padding:9px 15px;border-radius:999px;margin-bottom:16px;font-size:13px;letter-spacing:.2px}
.ssp-landing h1{font-size:44px;line-height:1.06;margin:0 0 16px;font-weight:900;color:#063d54;letter-spacing:-1.2px}
.ssp-landing-hero p{font-size:17px;line-height:1.65;margin:0 0 20px;color:#416273;max-width:720px}
.ssp-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}.ssp-hero-actions.center{justify-content:center}
.ssp-primary-btn,.ssp-secondary-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:14px;text-decoration:none!important;font-weight:800;transition:.2s ease}
.ssp-primary-btn{background:#063d54;color:#fff!important;box-shadow:0 10px 20px rgba(6,61,84,.18)}
.ssp-primary-btn:hover{transform:translateY(-2px);background:#08506e;color:#fff!important}
.ssp-secondary-btn{background:#fff;color:#063d54!important;border:2px solid rgba(6,61,84,.12)}
.ssp-secondary-btn:hover{transform:translateY(-2px);border-color:#ffcb05;color:#063d54!important}
.ssp-free-note{display:inline-block;margin-top:18px;background:#fff;border-left:5px solid #ffcb05;padding:12px 16px;border-radius:12px;color:#063d54;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.ssp-landing-hero-card{position:relative;z-index:1;background:#fff;border-radius:24px;padding:26px;box-shadow:0 16px 38px rgba(0,0,0,.10);border:1px solid rgba(6,61,84,.08)}
.ssp-landing-hero-card img{max-width:92px;display:block;margin:0 0 16px}.ssp-landing-hero-card h3{margin:0 0 14px;font-size:23px;color:#063d54}.ssp-landing-hero-card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.ssp-landing-hero-card li{background:#f3fbfd;border-radius:12px;padding:10px 12px;font-weight:700}.ssp-landing-hero-card li:before{content:"✓";color:#0a9b5b;font-weight:900;margin-right:9px}
.ssp-section,.ssp-howto{padding:52px 0 18px}.ssp-section-head{text-align:center;max-width:780px;margin:0 auto 26px}.ssp-section-head span{display:inline-block;color:#0a7aa0;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:1px;margin-bottom:8px}.ssp-section-head h2{font-size:34px;line-height:1.15;margin:0 0 10px;color:#063d54}.ssp-section-head p{color:#5c7684;line-height:1.6;margin:0;font-size:16px}
.ssp-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.ssp-feature-card{background:#fff;border:1px solid rgba(6,61,84,.08);border-radius:22px;padding:24px;box-shadow:0 12px 34px rgba(0,0,0,.06)}.ssp-feature-icon{font-size:34px;margin-bottom:14px}.ssp-feature-card h3{margin:0 0 8px;color:#063d54;font-size:19px}.ssp-feature-card p{margin:0;color:#5b7482;line-height:1.55;font-size:14.5px}
.ssp-howto{background:#f4fbfd;border-radius:28px;padding:42px 24px;margin-top:32px}.ssp-howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ssp-howto-step{background:#fff;border-radius:22px;padding:24px;text-align:center;box-shadow:0 10px 26px rgba(8,80,110,.07)}.ssp-howto-step b{display:inline-flex;width:46px;height:46px;border-radius:50%;background:#ffcb05;align-items:center;justify-content:center;color:#063d54;font-size:22px;margin-bottom:14px}.ssp-howto-step h3{margin:0 0 8px;color:#063d54}.ssp-howto-step p{margin:0;color:#5b7482;line-height:1.55}
.ssp-note-box{margin:36px 0;background:#063d54;color:#fff;border-radius:26px;padding:30px 34px;text-align:center}.ssp-note-box h2{margin:0 0 10px;color:#fff;font-size:28px}.ssp-note-box p{margin:0 auto;max-width:900px;line-height:1.7;color:#e9fbff}
.ssp-cta-panel{text-align:center;background:linear-gradient(135deg,#ffcb05,#ffe990);border-radius:28px;padding:36px 22px;margin:28px 0 8px;color:#063d54}.ssp-cta-panel h2{margin:0 0 8px;font-size:30px;color:#063d54}.ssp-cta-panel p{margin:0 0 12px;color:#174b5f}.ssp-contact-line{font-size:14px!important;margin-top:16px!important}
@media(max-width:900px){.ssp-landing-hero{grid-template-columns:1fr;padding:28px}.ssp-landing h1{font-size:34px}.ssp-feature-grid,.ssp-howto-grid{grid-template-columns:1fr}.ssp-section-head h2{font-size:28px}}


/* ================================================================
   SSP LANDING PAGE v1.3 — Inline Subscribe + Demo
   ================================================================ */
.ssp-landing-v13 .ssp-landing-hero-v13{grid-template-columns:1.15fr .85fr;background:linear-gradient(135deg,#e8fbff 0%,#ffffff 48%,#fff2a8 100%)}
.ssp-landing-v13 .ssp-lead{font-size:20px!important;color:#063d54!important;margin-bottom:8px!important}
.ssp-landing-v13 .ssp-hero-desc{margin-top:16px!important;color:#31566a!important}
.ssp-domain-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.ssp-domain-chips span{background:#fff;border:1px solid rgba(6,61,84,.10);border-radius:999px;padding:10px 13px;font-weight:800;color:#063d54;box-shadow:0 7px 18px rgba(8,80,110,.07);font-size:14px}
.ssp-demo-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:14px;text-decoration:none!important;font-weight:900;background:#ffcb05;color:#063d54!important;box-shadow:0 10px 20px rgba(255,203,5,.25);border:2px solid #ffcb05;transition:.2s ease}
.ssp-demo-btn:hover{transform:translateY(-2px);filter:brightness(.98);color:#063d54!important}
.ssp-stat-card{text-align:left}.ssp-stat-card img{margin-bottom:18px!important}.ssp-stat-list{display:grid;gap:12px}.ssp-stat-list div{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f4fbfd;border-radius:16px;padding:14px 16px;border:1px solid rgba(6,61,84,.08)}.ssp-stat-list b{font-size:26px;color:#0a648a;line-height:1}.ssp-stat-list span{font-weight:800;color:#37596b;text-align:right}
.ssp-subscribe-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:start;background:#f5fbfd;border-radius:30px;padding:34px;margin:46px 0 20px;border:1px solid rgba(6,61,84,.08)}
.ssp-subscribe-copy h2{font-size:34px;line-height:1.12;color:#063d54;margin:8px 0 12px}.ssp-subscribe-copy p{font-size:16px;line-height:1.65;color:#567486;margin:0 0 14px}.ssp-subscribe-copy ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}.ssp-subscribe-copy li{background:#fff;border-radius:14px;padding:12px 14px;font-weight:800;color:#063d54;box-shadow:0 8px 18px rgba(8,80,110,.05)}
.ssp-subscribe-card #ssp-subscribe-wrap{margin:0!important;max-width:none!important;box-shadow:0 16px 40px rgba(8,80,110,.10)!important;border:1px solid rgba(6,61,84,.08)}
.ssp-subscribe-card #ssp-subscribe-wrap h2{font-size:26px;color:#063d54!important}.ssp-subscribe-card #ssp-subscribe-wrap p{color:#567486;line-height:1.55}.ssp-subscribe-card #ssp-sub-btn{background:#063d54!important;width:100%;font-size:16px}.ssp-subscribe-card #ssp-subscribe-wrap a{display:inline-block;margin-top:12px;margin-left:0!important;color:#0a648a;font-weight:800;text-decoration:none}
@media(max-width:900px){.ssp-landing-v13 .ssp-landing-hero-v13,.ssp-subscribe-section{grid-template-columns:1fr}.ssp-domain-chips span{width:100%}.ssp-subscribe-section{padding:24px}.ssp-subscribe-copy h2{font-size:28px}}

/* SSP v1.4 tenant landing tuning */
.ssp-landing-v14 .ssp-badge,
.ssp-landing-v14 .ssp-section-head span{color:var(--ssp-theme,#063d54)}
.ssp-landing-v14 .ssp-primary-btn,
.ssp-landing-v14 .ssp-cta-panel{background:var(--ssp-theme,#063d54)!important}
.ssp-landing-v14 .ssp-feature-icon,
.ssp-landing-v14 .ssp-howto-step b{background:var(--ssp-theme,#063d54)!important;color:#fff!important}
.ssp-landing-v14 .ssp-domain-chips span{border-color:rgba(6,61,84,.15)}

/* SSP v1.6 demo section */
.ssp-demo-section{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;margin:36px 0;padding:30px;border-radius:28px;background:linear-gradient(135deg,#fff8d6,#ffffff);box-shadow:0 18px 45px rgba(6,61,84,.10);border:1px solid rgba(255,203,5,.45)}
.ssp-demo-copy h2{margin:10px 0 10px;font-size:32px;line-height:1.15;color:#063d54}.ssp-demo-copy p{font-size:17px;line-height:1.7;color:#345;margin:0 0 16px}.ssp-demo-list{display:flex;flex-wrap:wrap;gap:10px}.ssp-demo-list span{background:#fff;border:1px solid rgba(6,61,84,.08);border-radius:999px;padding:10px 13px;font-weight:800;color:#063d54;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.ssp-demo-card{background:#063d54;color:#fff;border-radius:24px;padding:28px;text-align:center;box-shadow:0 18px 40px rgba(6,61,84,.22)}.ssp-demo-card h3{margin:0 0 8px;color:#fff;font-size:28px}.ssp-demo-card p{color:#e9fbff;line-height:1.6;margin:0 0 18px}.ssp-demo-card small{display:block;margin-top:14px;color:#d9f4ff;word-break:break-all}.ssp-demo-big{font-size:16px;padding:16px 26px!important}
@media(max-width:780px){.ssp-demo-section{grid-template-columns:1fr;padding:22px}.ssp-demo-copy h2{font-size:26px}}


/* SSP v1.7 public demo page */
.ssp-demo-page{max-width:1180px;margin:0 auto;padding:20px}
.ssp-demo-page-hero{background:linear-gradient(135deg,#063d54,#0f6b84);color:#fff;border-radius:28px;padding:34px;margin:20px 0 24px;box-shadow:0 18px 48px rgba(6,61,84,.18)}
.ssp-demo-page-hero h1{color:#fff;margin:12px 0 10px;font-size:40px;line-height:1.1}
.ssp-demo-page-hero p{color:#e9fbff;font-size:18px;line-height:1.65;max-width:820px;margin:0 0 16px}
.ssp-demo-page-note{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:15px 18px;color:#fff;font-weight:700}
@media(max-width:780px){.ssp-demo-page{padding:12px}.ssp-demo-page-hero{padding:24px}.ssp-demo-page-hero h1{font-size:30px}}

/* SSP v1.9 - inline demo assessment on landing page */
.ssp-demo-assessment-section{
  padding:56px 24px;
  background:#f7fbfc;
  border-radius:28px;
  margin:36px auto;
  max-width:1180px;
  scroll-margin-top:90px;
}
.ssp-demo-assessment-card{
  background:#fff;
  border:1px solid rgba(6,61,84,.12);
  border-radius:24px;
  padding:22px;
  box-shadow:0 18px 45px rgba(6,61,84,.10);
}
.ssp-demo-assessment-section .ssp-section-head{
  max-width:760px;
  margin:0 auto 24px;
  text-align:center;
}
html{scroll-behavior:smooth;}

/* ============================================================
   INLINE / DEMO MODE — assessment embedded inside a card
   (hero + arahan hidden; give the steps bar breathing room
   and let the form fill its container without outer hero margins)
   ============================================================ */
#ssp-wrap.ssp-inline-mode { max-width:100%; }
#ssp-wrap.ssp-inline-mode .ssp-steps { margin-top:4px; }
#ssp-wrap.ssp-inline-mode .ssp-card { margin-left:0; margin-right:0; }

/* ============================================================
   SSP v1.9.2 — PRO LANDING (RM100 sekali bayar)
   ============================================================ */
.ssp-landing-pro .ssp-landing-hero-v13{align-items:center}

/* Trust row under hero CTAs */
.ssp-trust-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:20px}
.ssp-trust-row span{font-size:13.5px;font-weight:800;color:#2c5468}

/* Price hero card */
.ssp-price-hero-card{position:relative;overflow:hidden;text-align:center;padding:30px 26px!important;border:1px solid rgba(6,61,84,.08)}
.ssp-price-hero-card img{max-width:74px;margin:6px auto 14px!important}
.ssp-price-ribbon{position:absolute;top:16px;right:-42px;transform:rotate(45deg);background:#ffcb05;color:#063d54;font-weight:900;font-size:11px;letter-spacing:.5px;padding:6px 50px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.ssp-price-amount{font-size:56px;line-height:1;font-weight:900;color:var(--ssp-theme,#063d54);letter-spacing:-2px}
.ssp-price-sub{margin:8px 0 18px;font-weight:800;color:#0a7aa0;font-size:14px}
.ssp-price-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;text-align:left}
.ssp-price-list li{background:#f3fbfd;border-radius:12px;padding:10px 12px;font-weight:700;color:#063d54;font-size:14px}
.ssp-price-list li:before{content:"✓";color:#0a9b5b;font-weight:900;margin-right:9px}
.ssp-price-cta{width:100%}
.ssp-price-foot{display:block;margin-top:12px;color:#6b8696;font-size:12.5px}

/* Pricing section */
.ssp-pricing-section{padding:54px 0 18px}
.ssp-pricing-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;max-width:1100px;margin:0 auto}
.ssp-pricing-card{background:#fff;border-radius:26px;padding:34px;box-shadow:0 18px 48px rgba(6,61,84,.10);border:1px solid rgba(6,61,84,.08);position:relative}
.ssp-pricing-main{border:2px solid var(--ssp-theme,#063d54)}
.ssp-pricing-tag{position:absolute;top:-14px;left:34px;background:var(--ssp-theme,#063d54);color:#fff;font-weight:900;font-size:12px;letter-spacing:.5px;padding:7px 16px;border-radius:999px;box-shadow:0 10px 22px rgba(6,61,84,.22)}
.ssp-pricing-card h3{margin:8px 0 6px;font-size:24px;color:#063d54}
.ssp-pricing-price{display:flex;align-items:baseline;gap:10px;margin:6px 0 18px;flex-wrap:wrap}
.ssp-pricing-amt{font-size:54px;font-weight:900;color:var(--ssp-theme,#063d54);letter-spacing:-2px;line-height:1}
.ssp-pricing-per{font-weight:800;color:#0a7aa0;background:#eafaf1;padding:6px 12px;border-radius:999px;font-size:13px}
.ssp-pricing-features{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:11px}
.ssp-pricing-features li{padding-left:28px;position:relative;color:#345a6a;line-height:1.5;font-weight:600;font-size:15px}
.ssp-pricing-features li:before{content:"✓";position:absolute;left:0;top:0;color:#0a9b5b;font-weight:900;font-size:17px}
.ssp-pricing-btn{width:100%;margin-bottom:10px}
.ssp-pricing-card small{color:#6b8696;font-size:13px}
.ssp-pricing-side{display:flex;flex-direction:column;gap:16px}
.ssp-pay-card{background:#063d54;color:#fff;border-radius:24px;padding:26px;box-shadow:0 18px 44px rgba(6,61,84,.22)}
.ssp-pay-card h4{margin:0 0 10px;color:#fff;font-size:19px}
.ssp-pay-card p{color:#e9fbff;line-height:1.6;margin:0 0 14px;font-size:14.5px}
.ssp-pay-bank{display:grid;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.ssp-pay-bank div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ssp-pay-bank span{color:#bfe7f2;font-size:13px;font-weight:700}
.ssp-pay-bank b{color:#fff;font-size:15px;text-align:right}
.ssp-pay-note{font-size:13px!important;color:#cdeefa!important}
.ssp-pay-wa{width:100%;background:#25d366!important;color:#063d54!important;border:0!important}
.ssp-pay-wa:hover{filter:brightness(.97);transform:translateY(-2px)}
.ssp-guarantee{display:flex;gap:12px;align-items:flex-start;background:#eafaf1;border:1px solid rgba(10,155,91,.2);border-radius:18px;padding:16px 18px}
.ssp-guarantee span{font-size:22px}
.ssp-guarantee b{color:#0a6b40}
.ssp-guarantee div{color:#236047;line-height:1.5;font-size:14px}

/* FAQ */
.ssp-faq-section{padding:50px 0 18px}
.ssp-faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1040px;margin:0 auto}
.ssp-faq-item{background:#fff;border:1px solid rgba(6,61,84,.08);border-radius:20px;padding:22px 24px;box-shadow:0 12px 32px rgba(6,61,84,.06)}
.ssp-faq-item h4{margin:0 0 8px;color:#063d54;font-size:16.5px}
.ssp-faq-item p{margin:0;color:#56727f;line-height:1.6;font-size:14.5px}

@media(max-width:900px){
  .ssp-pricing-grid{grid-template-columns:1fr}
  .ssp-faq-grid{grid-template-columns:1fr}
  .ssp-price-amount{font-size:48px}
  .ssp-pricing-amt{font-size:46px}
  .ssp-trust-row{gap:8px 14px}
}
.ssp-pricing-section,#ssp-langganan{scroll-margin-top:80px}

/* ============================================================
   SSP v1.9.3 — Smaller fonts + stronger mobile friendliness
   (overrides previous landing sizing; placed last to win)
   ============================================================ */

/* --- Desktop: dial down oversized type --- */
.ssp-landing-pro h1{font-size:34px;letter-spacing:-.8px;line-height:1.12}
.ssp-landing-pro .ssp-lead{font-size:17px!important}
.ssp-landing-pro .ssp-landing-hero p{font-size:15px}
.ssp-landing-pro .ssp-hero-desc{font-size:14px!important}
.ssp-landing-pro .ssp-section-head h2{font-size:26px;line-height:1.18}
.ssp-landing-pro .ssp-section-head p{font-size:15px}
.ssp-landing-pro .ssp-domain-chips span{font-size:13px;padding:8px 12px}
.ssp-landing-pro .ssp-primary-btn,
.ssp-landing-pro .ssp-secondary-btn,
.ssp-landing-pro .ssp-demo-btn{font-size:14px;padding:12px 18px}
.ssp-landing-pro .ssp-trust-row span{font-size:12.5px}

.ssp-price-amount{font-size:46px}
.ssp-pricing-amt{font-size:44px}
.ssp-pricing-card h3{font-size:21px}
.ssp-pricing-features li{font-size:14px}
.ssp-faq-item h4{font-size:15.5px}
.ssp-faq-item p{font-size:14px}
.ssp-feature-card h3{font-size:17px}
.ssp-feature-card p{font-size:13.5px}
.ssp-note-box h2{font-size:24px}
.ssp-demo-page-hero h1{font-size:30px}
.ssp-demo-card h3{font-size:23px}

/* --- Tablet --- */
@media(max-width:900px){
  .ssp-landing-pro h1{font-size:28px}
  .ssp-landing-pro .ssp-section-head h2{font-size:23px}
  .ssp-price-amount{font-size:42px}
  .ssp-pricing-amt{font-size:40px}
}

/* --- Phone (<=600px): single column, comfy taps, no overflow --- */
@media(max-width:600px){
  .ssp-landing,.ssp-landing-pro{padding:0 4px}
  .ssp-landing-hero,.ssp-landing-hero-v13{padding:22px 18px!important;border-radius:18px;margin:8px 0 16px}
  .ssp-landing-pro h1{font-size:24px;line-height:1.18}
  .ssp-landing-pro .ssp-lead{font-size:15px!important}
  .ssp-landing-pro .ssp-landing-hero p{font-size:14px}
  .ssp-badge{font-size:11px;padding:7px 12px}

  /* Stack hero buttons full-width for easy tapping */
  .ssp-hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .ssp-hero-actions a{width:100%}
  .ssp-trust-row{flex-direction:column;gap:6px;margin-top:14px}

  .ssp-domain-chips{gap:8px}
  .ssp-domain-chips span{width:100%;font-size:12.5px;text-align:center}

  /* Price hero card */
  .ssp-price-hero-card{padding:24px 18px!important;margin-top:6px}
  .ssp-price-amount{font-size:40px}
  .ssp-price-ribbon{font-size:10px;right:-46px;padding:5px 50px}

  /* Sections */
  .ssp-section,.ssp-howto,.ssp-pricing-section,.ssp-faq-section{padding:30px 0 8px}
  .ssp-section-head{margin-bottom:18px}
  .ssp-landing-pro .ssp-section-head h2{font-size:21px}
  .ssp-landing-pro .ssp-section-head p{font-size:14px}
  .ssp-section-head span{font-size:11px}

  /* Pricing */
  .ssp-pricing-card{padding:24px 18px;border-radius:20px}
  .ssp-pricing-tag{left:18px;font-size:11px;padding:6px 13px}
  .ssp-pricing-amt{font-size:38px}
  .ssp-pricing-features li{font-size:13.5px;padding-left:25px}
  .ssp-pay-card{padding:20px 18px}
  .ssp-pay-bank b{font-size:14px}
  .ssp-pay-bank span{font-size:12px}

  /* Cards */
  .ssp-feature-card,.ssp-howto-step,.ssp-faq-item{padding:18px}
  .ssp-note-box{padding:24px 20px}
  .ssp-note-box h2{font-size:21px}

  /* Demo + subscribe */
  .ssp-demo-section,.ssp-subscribe-section{padding:18px!important;border-radius:20px}
  .ssp-demo-card{padding:22px}
  .ssp-demo-card h3{font-size:21px}
  .ssp-demo-assessment-section{padding:24px 12px}
  .ssp-demo-assessment-card{padding:14px}

  /* Subscribe form inputs easier to tap */
  .ssp-subscribe-card #ssp-subscribe-wrap{padding:18px!important}
  #ssp-subscribe-wrap input{font-size:15px!important}

  /* Demo-page hero */
  .ssp-demo-page-hero{padding:22px;border-radius:20px}
  .ssp-demo-page-hero h1{font-size:24px}
  .ssp-demo-page-hero p{font-size:15px}
}

/* Avoid horizontal scroll on small screens */
.ssp-landing,.ssp-landing-pro,.ssp-demo-page{overflow-x:hidden}

/* v1.9.4 — locked demo field */
.ssp-locked-field{background:#f3f6f8!important;color:#5b7482!important;cursor:not-allowed;font-weight:800;letter-spacing:.5px}