/* ── Hero ── */
.hero { padding-top: 72px; text-align: center; }
.hero h1 { font-size: 30px; font-weight: 700; }
.hero .sub { margin-top: 16px; font-size: 18px; color: var(--ink-soft); }
.cta {
  display: inline-block; margin-top: 32px;
  background: var(--grow); color: var(--on-grow); font-weight: 700; font-size: 17px;
  padding: 14px 28px; border-radius: var(--r-pill); text-decoration: none;
}
.cta:hover { background: var(--grow-deep); }
@media (min-width: 768px) {
  .hero h1 { font-size: 42px; }
  .hero .sub { font-size: 20px; }
}

/* ── 방법 증명 · 세 유형 스트립 ── */
.method h2 { font-size: 24px; font-weight: 700; text-align: center; }
.method .lead { margin-top: 12px; text-align: center; color: var(--ink-soft); }
.types { margin-top: 40px; display: grid; gap: 20px; }
.type-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px;
}
.type-tag {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--grow-deep);
  background: var(--grow-tint); padding: 4px 10px; border-radius: var(--r-pill);
}
.type-chain { margin-top: 14px; list-style: none; }
.type-chain li { position: relative; padding: 4px 0 4px 18px; color: var(--ink); }
.type-chain li::before { content: "→"; position: absolute; left: 0; color: var(--grow); }
.type-chain li:first-child { padding-left: 0; font-weight: 700; }
.type-chain li:first-child::before { content: none; }
@media (min-width: 768px) { .types { grid-template-columns: repeat(3, 1fr); } }

/* ── bottom-up 차별점 ── */
.diff { background: var(--surface); }
.diff h2 { font-size: 24px; font-weight: 700; text-align: center; }
.diff .lead { margin-top: 12px; text-align: center; color: var(--ink-soft); }
.compare { margin-top: 40px; display: grid; gap: 24px; align-items: start; }
.compare .col-label { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--ink-soft); }
.mock-list { border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px; }
.mock-list .row { padding: 14px 12px; border-bottom: 1px solid var(--line); color: var(--mut); }
.mock-list .row:last-child { border-bottom: none; }
.shot { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.shot img { width: 100%; }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }

/* ── 철학 ── */
.philosophy h2 { font-size: 24px; font-weight: 700; text-align: center; }
.principles { margin-top: 36px; display: grid; gap: 20px; }
.principle { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.principle h3 { font-size: 18px; font-weight: 700; }
.principle p { margin-top: 8px; color: var(--ink-soft); }
@media (min-width: 768px) { .principles { grid-template-columns: repeat(3, 1fr); } }

/* ── 편지 ── */
.letter { background: var(--grow-tint); }
.letter .wrap { max-width: 640px; }
.letter h2 { font-size: 22px; font-weight: 700; }
.letter p { margin-top: 16px; color: var(--ink); font-size: 17px; }
.letter .sign { margin-top: 24px; color: var(--ink-soft); }

/* ── 테스터 안내 ── */
.tester h2 { font-size: 24px; font-weight: 700; text-align: center; }
.tester .lead { margin-top: 12px; text-align: center; color: var(--ink-soft); }
.tester ul { margin: 28px auto 0; max-width: 520px; list-style: none; }
.tester li { position: relative; padding: 10px 0 10px 28px; }
.tester li::before { content: "✓"; position: absolute; left: 0; color: var(--grow); font-weight: 700; }

/* ── 등록 ── */
.signup { text-align: center; }
.signup h2 { font-size: 26px; font-weight: 700; }
.signup .lead { margin-top: 12px; color: var(--ink-soft); }
.signup form { margin: 28px auto 0; max-width: 420px; display: grid; gap: 14px; }
.signup input[type="email"] {
  width: 100%; font-size: 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.consent { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 14px; color: var(--ink-soft); }
.consent input { margin-top: 3px; }
.signup button {
  font-size: 17px; font-weight: 700; color: var(--on-grow); background: var(--grow);
  border: none; padding: 14px; border-radius: var(--r-pill); cursor: pointer;
}
.signup button:disabled { opacity: 0.45; cursor: not-allowed; }
.form-msg { margin-top: 14px; min-height: 22px; font-weight: 700; }
.form-msg.ok { color: var(--grow-deep); }
.form-msg.err { color: var(--danger); }