/* NKS-476 — 品牌首页与品牌帮助入口（/{lang}/、/{lang}/help/）页面样式；token 与卡片来自 site.css。 */
/* .wrap 的 padding 具名类优先级高于 section 元素选择器，纵向留白用 padding-block 且带类名 */
main > section.wrap { padding-block: 56px; }
main > section.brand-hero { padding-block: 72px 24px; }
.brand-hero .subhead { max-width: 700px; }
main > section.brand-products { padding-block: 24px 56px; }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 36px; }
.lede { max-width: 720px; }
.lede + .principles { margin-top: 32px; }
.principle {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 24px 24px 22px;
}
.principle .glyph {
  width: 34px; height: 34px; border-radius: var(--radius-chip); background: var(--accent-soft);
  display: grid; place-items: center; margin-bottom: 16px;
  color: var(--accent-ink); font-size: 16px; font-weight: 600;
}
.principle h3 { font-size: 17px; font-weight: 650; margin-bottom: 8px; letter-spacing: -0.005em; }
.principle p { font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; }
.brand-contact { margin-top: 36px; font-size: 15.5px; color: var(--ink-2); }
.brand-contact a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .brand-hero > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .brand-hero > :nth-child(2) { animation-delay: .06s; }
  .brand-hero > :nth-child(3) { animation-delay: .12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) {
  main > section.wrap { padding-block: 40px; }
  main > section.brand-hero { padding-block: 48px 16px; }
  .principles { grid-template-columns: 1fr; }
}