/* RFQ Copilot デモページの外枠だけ。アプリ本体の CSS は app.js が自分で注入する。
   日本語ページ（lp.css）と英語ページ（en.css）の両方から読むので、
   どちらの変数体系にも依存しないよう色は自前で持つ。 */

:root {
  --rfqp-bg: #F7F3EA;
  --rfqp-surface: #FFFFFF;
  --rfqp-text: #16201C;
  --rfqp-muted: #616E68;
  --rfqp-primary: #123C35;
  --rfqp-border: #DDD4C6;
  --rfqp-max: 1440px;
}

.demo-intro,
.demo-outro {
  padding: 56px 0 32px;
  background: var(--rfqp-bg);
  color: var(--rfqp-text);
}

.demo-outro {
  padding: 48px 0 72px;
  border-top: 1px solid var(--rfqp-border);
}

.demo-intro h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rfqp-primary);
}

.demo-outro h2 {
  margin: 0 0 20px;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--rfqp-primary);
}

.demo-lead {
  max-width: 62ch;
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--rfqp-text);
}

.demo-note {
  max-width: 62ch;
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--rfqp-border);
  background: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.8;
  color: var(--rfqp-muted);
}

.demo-outro .demo-note {
  margin: 24px 0 28px;
}

/* アプリ本体。3カラムを収めたいので本文より広く取る */
.demo-root {
  max-width: var(--rfqp-max);
  margin: 0 auto;
  padding: 0 16px 8px;
}

.demo-outro-list {
  max-width: 68ch;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.demo-outro-list li {
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rfqp-text);
}

.demo-outro-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rfqp-primary);
}

.demo-outro-list strong {
  color: var(--rfqp-primary);
}

/* JS を切っていても3件の中身が読めること（プランの受け入れ条件） */
.demo-noscript {
  padding: 8px 0 40px;
}

.demo-noscript-list {
  margin: 20px 0;
  padding-left: 24px;
  display: grid;
  gap: 20px;
}

.demo-noscript-list h2 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--rfqp-primary);
}

.demo-noscript-list p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--rfqp-text);
}

@media (max-width: 640px) {
  .demo-intro { padding: 32px 0 20px; }
  .demo-outro { padding: 32px 0 48px; }
  .demo-root { padding: 0 0 8px; }
}

@media print {
  .demo-intro,
  .demo-outro,
  header.site,
  footer.site { display: none !important; }
  .demo-root { max-width: none; padding: 0; }
}