/* KaiCleaner page layout. Tokens/utilities come from /assets/kaitheme.css (body.kai). */

.kc-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
  padding: 96px 0 84px;
}
.kc-hero h1 { font-size: clamp(52px, 8.5vw, 104px); }
.kc-hero h1 span { color: var(--kai-cyan); }
.kc-lead { max-width: 540px; margin: 30px 0 26px; color: var(--kai-muted); font-size: clamp(17px, 2vw, 21px); }
.kc-hero .kai-pill { margin: 0 0 22px; }
.kc-hero .status { color: var(--kai-ink); }

.kc-hero-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 100px #0008;
}
.kc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 74%; }
.kc-appchip {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: #0a0f1ccc; backdrop-filter: blur(6px);
  border: 1px solid #ffffff26; color: #eaf4ff; font-weight: 750; letter-spacing: -.01em;
}
.kc-appchip img { border-radius: 10px; display: block; }

/* section rhythm */
main > section { border-top: 1px solid #ffffff12; }
.kc-hero { border-top: 0; }
.kc-principles, .kc-features, .kc-shots, .kc-pro, .kc-privacy { padding: 84px 0; }

.kc-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kc-principles h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.03em; }
.kc-principles p { margin: 0; color: var(--kai-muted); font-size: 15px; }

.kc-features h2 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.05em; margin-bottom: 34px; }
.kc-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kc-feature-grid strong { display: block; font-size: 18px; letter-spacing: -.02em; }
.kc-feature-grid span { display: block; margin-top: 8px; color: var(--kai-muted); font-size: 14px; }
.kc-note { margin-top: 30px; color: var(--kai-muted); font-size: 16px; }
.kc-note strong { color: var(--kai-cyan); }

.kc-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; justify-items: center; }
.kc-shots figure { margin: 0; text-align: center; }
.kc-shots img { width: 100%; max-width: 300px; height: auto; border-radius: 26px; border: 1px solid #ffffff1a; box-shadow: 0 30px 70px #0008; }
.kc-shots figcaption { margin-top: 16px; color: var(--kai-muted); font-size: 14px; }

.kc-pro-card { max-width: 720px; margin-inline: auto; padding: 40px 40px 34px; border: 1px solid #f2a32633; background: linear-gradient(180deg, #f2a3260f, #ffffff06); }
.kc-pro-pill { border-color: #f2a32655; color: var(--kai-gold-b); }
.kc-pro h2 { font-size: clamp(30px, 4.5vw, 48px); letter-spacing: -.04em; margin: 18px 0 12px; }
.kc-pro-sub { margin: 0 0 24px; color: var(--kai-muted); font-size: 16px; }
.kc-pro-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.kc-pro-list li { position: relative; padding-left: 30px; font-size: 16px; }
.kc-pro-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #06101f; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: linear-gradient(120deg, var(--kai-gold-a), var(--kai-gold-b)); }
.kc-pro-foot { margin: 26px 0 0; color: var(--kai-muted); font-size: 13px; }

.kc-privacy { max-width: 820px; margin-inline: auto; text-align: center; }
.kc-privacy blockquote { margin: 0 0 30px; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.3; letter-spacing: -.03em; color: var(--kai-ink); }

@media (max-width: 860px) {
  .kc-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 72px; }
  .kc-hero-art { order: -1; max-width: 440px; }
  .kc-principles, .kc-feature-grid, .kc-shots { grid-template-columns: 1fr; }
  .kc-feature-grid { gap: 14px; }
  .kc-shots figure { max-width: 340px; }
}