/* 两个独立项目使用同一套页面骨架规则。颜色依据 https://midu.design/kiwebank。 */
:root {
  --page-background: #050505;
  --surface: rgba(255, 255, 255, 0.07);
  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --muted: var(--text-secondary);
  --footer-gradient: linear-gradient(180deg, #ff030000 0%, #ff0022ad 60%, #ff7d4e 85%);
}
html, body, .page-shell { background: var(--page-background); }
body { color: var(--text-primary); }
.menu-button { left: calc(50% - var(--menu-width) / 2); letter-spacing: 0; }
.menu-status, .hero-meta, .hero-copy { color: var(--text-secondary); }
.contact-button { color: #030303; }

/* 普通媒体容器无描边，整张图片单独用父容器裁切圆角，防止透明边缘露灰。 */
.dark-panel { background: var(--surface); border: 0; box-shadow: none; }
.overview-media > .dark-panel, .media-07.dark-panel { background: transparent; }
.overview-media img { object-fit: cover; border-radius: 0; }
.media-07 > img { border-radius: 0; }

.rail-card { background: var(--surface); opacity: 0.8; }
.rail-card.is-active { opacity: 1; }
.rail-label, .overview-summary, .challenge-copy,
.rail-marketing .rail-card-content > p, .marketing-copy { color: var(--text-secondary); }
.rail-card h3 { color: var(--text-primary); }
.rail-overview.is-active { height: var(--overview-card-height, 511px); overflow: visible; }
.rail-marketing.is-active { height: var(--marketing-card-height, 329px); }
.rail-overview .overview-summary { height: auto; }
.overview-summary p { margin: 0 0 16px; }
.overview-summary .business-metrics { margin: 0 0 16px; font-weight: 400; }
.business-metrics li { position: relative; padding-left: 16px; width: 100%; }
.business-metrics li::before { position: absolute; left: 0; }
.business-metrics .metric-label { display: inline; text-align: left; }
.challenge-group { padding-top: 0; }
.challenge-item, .challenge-item:last-child { flex: 0 0 auto; gap: 32px; }
.challenge-item .challenge-copy, .challenge-item:last-child .challenge-copy { height: auto; }
.challenge-copy p + p { margin-top: 24px; }
.marketing-copy { margin-top: 32px; font-size: 16px; line-height: 24px; }
.marketing-copy p { margin: 0; }
.marketing-copy p + p { margin-top: 24px; }
.metric-tooltip { font-weight: 400; visibility: hidden; pointer-events: auto; }
.metric-tooltip::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
.metric-with-detail:not(.tooltip-dismissed):hover .metric-tooltip,
.metric-with-detail:not(.tooltip-dismissed):focus-within .metric-tooltip { visibility: visible; }
.metric-with-detail.tooltip-dismissed .metric-tooltip { opacity: 0; visibility: hidden; }

/* 社媒内容的布局共用，展示板品牌背景仍使用各项目稿件配色。 */
.social-post-row { position: absolute; left: 152px; top: 64px; width: 624px; height: 432px; display: flex; gap: 24px; }
.social-post-column { width: 192px; flex: 0 0 192px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.social-post-crop { position: relative; width: 192px; height: 384px; flex: 0 0 auto; overflow: hidden; border-radius: var(--media-radius); }
.social-post-column:nth-child(2) .social-post-crop img { left: -216px; top: 0; }
.social-platform-logo { display: block; height: 16px; object-fit: contain; }
.logo-instagram { width: 72px; }
.logo-platform { width: 20px; }
.logo-x { width: 16px; }

.footer-intro > span, .footer-intro strong, .footer-links a { color: var(--text-primary); }
.footer-links > div > span { color: var(--text-secondary); }
.footer-word { background-image: var(--footer-gradient); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail-card, .rail-label, .rail-card-content, .section-card-rail { transition-duration: 0s; }
}