body { font-family: Arial, sans-serif; margin:0; background:#fff; color:#000; }

.nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px; border-bottom:1px solid #eee;
}
.nav a { text-decoration:none; color:#666; margin-left:20px; }
.logo { font-weight:800; font-size:18px; }

.hero { padding:120px 40px; }
.hero-content { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-text { max-width:600px; }
.hero h1 { font-size:64px; font-weight:800; line-height:1.2; margin-bottom:20px; }
.hero p { font-size:18px; color:#555; margin-bottom:40px; }
.button { display:inline-block; background:black; color:white; padding:10px 24px; border-radius:999px; text-decoration:none; }
.hero-image { display:flex; justify-content:center; align-items:center; }
.hero-image img { max-width:100%; height:auto; max-height:600px; object-fit:contain; }

/* Responsive design for hero section */
@media (max-width: 968px) {
  .hero-content { grid-template-columns:1fr; gap:40px; }
  .hero-text { max-width:100%; }
  .hero-image { order:-1; }
  .hero-image img { max-height:400px; }
}

.tag-scroll { margin:60px 40px; color:#aaa; letter-spacing:3px; font-size:12px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:80px 40px; align-items:center; }
.split-image { display:flex; justify-content:center; align-items:center; }
.split-image img { max-width:100%; height:auto; max-height:500px; object-fit:contain; }
.split-text { display:flex; flex-direction:column; justify-content:center; }
.box { background:#f3f3f3; border-radius:20px; height:300px; }
.box.large { height:500px; }

/* Responsive design for split section */
@media (max-width: 968px) {
  .split { grid-template-columns:1fr; gap:40px; }
  .split-image { order:-1; }
  .split-image img { max-height:400px; }
}

.page { padding:80px 40px; max-width:900px; }
.page h1 { font-size:48px; font-weight:800; margin-bottom:20px; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px; }
.tag { background:#f2f2f2; padding:20px; border-radius:10px; font-size:18px; }

.list { font-size:18px; color:#555; line-height:1.8; }

/* Blog-style layout */
.blog-page { padding:80px; max-width:900px; margin:0 auto; }
.blog-page h1 { font-size:56px; font-weight:800; line-height:1.2; margin-bottom:20px; }
.subtitle { font-size:20px; color:#666; margin-bottom:60px; line-height:1.6; }

.blog-section { margin-bottom:80px; }
.blog-section h2 { font-size:36px; font-weight:800; margin-bottom:24px; margin-top:48px; }
.blog-section h2:first-child { margin-top:0; }
.blog-section h3 { font-size:28px; font-weight:700; margin-bottom:16px; margin-top:32px; }
.blog-section p { font-size:18px; color:#333; line-height:1.8; margin-bottom:20px; }
.blog-section p strong { color:#000; font-weight:600; }

.blog-list { font-size:18px; color:#555; line-height:2; margin:20px 0; padding-left:24px; }
.blog-list li { margin-bottom:12px; }
.blog-list.checkmarks li::marker { content: "✔ "; color:#000; font-weight:600; }

.method-block { margin-bottom:48px; padding-bottom:32px; border-bottom:1px solid #f0f0f0; }
.method-block:last-child { border-bottom:none; }

.stakeholder-block { margin-bottom:64px; padding-bottom:48px; border-bottom:1px solid #f0f0f0; }
.stakeholder-block:last-child { border-bottom:none; }

.source-block { margin-bottom:48px; padding-bottom:32px; border-bottom:1px solid #f0f0f0; }
.source-block:last-child { border-bottom:none; }
.source-block h2 { font-size:24px; font-weight:700; margin-bottom:16px; margin-top:0; }
.source-block a { color:#000; text-decoration:underline; }
.source-block a:hover { color:#666; }

.tip { background:#f9f9f9; padding:16px 20px; border-left:3px solid #000; margin:20px 0; font-size:17px; color:#444; }

.quote { font-size:20px; color:#333; font-style:italic; margin:24px 0; padding-left:20px; border-left:3px solid #ddd; }
.quote-block { margin:80px 0; padding:40px; background:#f9f9f9; border-radius:12px; text-align:center; }
.quote-large { font-size:28px; font-weight:600; color:#000; margin-bottom:12px; font-style:italic; }
.quote-attribution { font-size:16px; color:#666; margin-top:8px; }

/* Interactive content styles */
.hashtag-block { margin-bottom:40px; padding:32px; border-radius:12px; border-left:4px solid #ddd; }
.hashtag-block.harmful { background:#fff5f5; border-left-color:#d32f2f; }
.hashtag-block.supportive { background:#f0f9f4; border-left-color:#2e7d32; }
.hashtag-block h3 { margin-top:0; margin-bottom:16px; }

.section-intro { font-size:18px; color:#666; font-style:italic; margin-bottom:32px; padding-bottom:16px; border-bottom:1px solid #eee; }

.data-box { background:#f9f9f9; padding:32px; border-radius:12px; margin:32px 0; }
.data-table { width:100%; border-collapse:collapse; margin:24px 0; }
.data-table th { background:#000; color:#fff; padding:16px; text-align:left; font-weight:600; font-size:16px; }
.data-table td { padding:16px; border-bottom:1px solid #eee; font-size:16px; }
.data-table tr:hover { background:#f5f5f5; }
.data-explanation { margin-top:24px; padding:20px; background:#fff; border-left:3px solid #000; font-size:17px; color:#444; line-height:1.7; }

.blog-list a { color:#000; text-decoration:underline; }
.blog-list a:hover { color:#666; }