/* kinetext.css: Kinetext sales page only */
.hero { padding-top: var(--space-3); }
.hero-grid { display: grid; gap: var(--space-4); }
.lead { font-size: 18px; color: var(--text-dim); }
.req { margin: var(--space-1) 0 0; font-size: 14px; color: var(--text); }

/* demo video: striped placeholder sits behind the video until demo.mp4 exists */
.demo {
  position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 420px; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, var(--panel) 0 12px, var(--panel-2) 12px 24px);
}
.demo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.demo-placeholder {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; color: var(--text-dim);
}
.demo.is-missing video { display: none; }

.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: var(--space-4); margin-bottom: var(--space-1); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue); box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 16px var(--blue-text);
}

/* caption-style illustrations */
.examples { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-3) 0 var(--space-1); }
.example { margin: 0; }
.example figcaption { margin-top: var(--space-1); font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.frame {
  aspect-ratio: 9 / 16; border-radius: var(--radius); display: flex; align-items: flex-end; justify-content: center;
  padding: var(--space-1) var(--space-1) var(--space-4); text-align: center;
  background: linear-gradient(180deg, #24324f 0%, #0d1424 100%);
}
.cap { line-height: 1.15; }
.cap em { font-style: normal; }
.cap-bold { font-family: var(--font-display); font-size: 15px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.cap-bold em { color: var(--lime); }
.cap-box { font-weight: 800; font-size: 13px; background: #fff; color: #06122b; padding: 4px 6px; border-radius: 4px; }
.cap-box em { color: var(--blue); }
.cap-clean { font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px #000; }

.testimoni-grid { display: grid; gap: var(--space-2); }
.testimoni-card { margin: 0; padding: var(--space-3); background: var(--panel); border-radius: var(--radius-lg); }
.testimoni-card blockquote { margin: 0 0 var(--space-1); }

.trust { margin: var(--space-3) 0 0; }
.trust-badge {
  display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--border);
  border-radius: 999px; font-size: 14px; color: var(--text-dim);
}

/* offer */
.offer { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); }
.bonus-list { padding-left: var(--space-3); }
.bonus-list li { margin-bottom: var(--space-1); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin-top: var(--space-3); }
.price-old { color: var(--text-dim); font-size: 20px; }
.price-now { font-family: var(--font-display); font-size: 40px; color: var(--text); line-height: 1; }
.price-note { flex-basis: 100%; font-size: 14px; color: var(--text-dim); }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--space-8); }
  .examples { max-width: 560px; }
  .offer { padding: var(--space-5); }
}