/* 珊瑚双栏 · 21/30 · domain-specific layout */
.site-layout-21 {
  --site-primary: #e11d48;
  --site-surface: #fff1f2;
  --site-ink: #4c0519;
  --site-line: color-mix(in srgb, var(--site-primary) 24%, transparent);
  accent-color: var(--site-primary);
}
.site-layout-21, .site-layout-21 :is(button,input,select,textarea) {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.site-layout-21 :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--site-primary) 55%, white);
  outline-offset: 3px;
}
.site-layout-21 :is(.hero,.page-hero) { text-align: left; }
.site-layout-21 :is(.hero,.page-hero) h1,
.site-layout-21 :is(.hero,.page-hero) .sub,
.site-layout-21 :is(.hero,.page-hero) p { margin-left: 0; margin-right: 0; }
.site-layout-21 :is(.btn,.hero-btn,.nav-cta,button) { min-height: 44px; }
.site-layout-21 .codex-page-title {
  width:min(1120px,calc(100% - 40px)); margin:28px auto 0; padding:16px 20px;
  border-left:5px solid var(--site-primary); background:var(--site-surface);
  color:var(--site-ink); font-size:clamp(21px,2.4vw,30px); line-height:1.35;
}
.site-layout-21 :is(.type-card,.feature-card,.entry-card,.why-card,.media-card,.q-card,.card) {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.site-layout-21 :is(.type-card,.feature-card,.entry-card,.why-card,.media-card):hover {
  transform: translateY(-4px);
}
.site-layout-21 .codex-beian { color: inherit !important; opacity: .72; }
@media (prefers-reduced-motion: reduce) {
  .site-layout-21 *, .site-layout-21 *::before, .site-layout-21 *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.site-layout-21 :is(.hero,.page-hero) {
  min-height:0; display:block; position:relative; overflow:hidden;
  padding:104px 20px 84px;
  background:
    radial-gradient(circle at 86% 22%, #e11d4824 0 150px, transparent 152px),
    linear-gradient(125deg,#fff1f2 0 72%,#ffe4e6 72% 100%)!important;
  color:#4c0519!important;
  border-bottom:10px solid #e11d48;
}
.site-layout-21 :is(.hero,.page-hero)>* { width:min(1120px,100%); margin-left:auto!important; margin-right:auto!important; }
.site-layout-21 :is(.hero h1,.hero .sub,.hero p) { max-width:720px; }
.site-layout-21 .hero-stats { justify-content:flex-start; gap:clamp(28px,5vw,64px); }
.site-layout-21 :is(.section,.section-alt):nth-of-type(even) .container { border-left:8px solid #e11d48; padding-left:44px; }
@media (max-width:900px) {
  .site-layout-21 :is(.hero,.page-hero) {
    padding:64px 20px 54px;
    background:linear-gradient(180deg,#fff1f2 0%,#fff 100%)!important;
    border-bottom-width:6px;
  }
  .site-layout-21 :is(.hero,.page-hero)>* { width:100%; }
  .site-layout-21 .hero-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px; }
  .site-layout-21 :is(.section,.section-alt):nth-of-type(even) .container { border-left:0; padding-left:20px; padding-right:20px; }
}
@media (max-width:900px) {
  .site-layout-21 { padding-left:0; border-left-width:0; border-right-width:0; }
  .site-layout-21 :is(.site-header,.top-nav,body>nav) { width:100%; margin:0; border-radius:0; position:sticky; height:auto; }
  .site-layout-21 :is(.nav-inner,.nav) { height:auto; min-height:60px; flex-direction:row; padding:0 18px; }
  .site-layout-21 .nav-links { flex-direction:row; }
  .site-layout-21 :is(.hero,.page-hero) { width:100%; min-height:0; margin:0; border-radius:0; clip-path:none; padding:72px 20px; display:block; }
  .site-layout-21 :is(.hero,.page-hero)::after { display:none; }
  .site-layout-21 :is(.hero,.page-hero)>*, .site-layout-21 :is(.hero h1,.hero .sub,.hero p) { width:auto; max-width:100%; margin-left:auto!important; margin-right:auto!important; }
  .site-layout-21 :is(.section,.section-alt,.test-section,.why-section,.faq-section,.planet-section) { width:100%; margin:0; border-radius:0; padding-top:64px; padding-bottom:64px; }
  .site-layout-21 :is(.section,.test-section):nth-of-type(even) .container,
  .site-layout-21 :is(.section,.test-section):nth-of-type(odd) .container { transform:none; }
  .site-layout-21 :is(.grid-4,.type-grid,.features,.features-grid,.entry-grid,.why-grid,.media-grid) { grid-template-columns:1fr!important; transform:none; }
  .site-layout-21 :is(.grid-4,.type-grid,.features,.features-grid,.entry-grid,.why-grid)>* { grid-column:auto!important; grid-row:auto!important; transform:none; }
}