/**
 * 六纲科技官网 — AI Native 页面样式
 */

/* —— 图文分栏 —— */
.r6-an-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}

.r6-an-split--reverse {
  direction: rtl;
}

.r6-an-split--reverse > * {
  direction: ltr;
}

.r6-an-text p {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.85;
  color: var(--r6-text-dark-secondary);
  margin-bottom: 1.25rem;
}

.r6-an-text p:last-child {
  margin-bottom: 0;
}

.r6-section-dark-alt .r6-an-text p {
  color: var(--r6-gray-300);
}

.r6-an-figure {
  position: relative;
  border-radius: var(--r6-radius-lg);
  overflow: hidden;
  border: 1px solid var(--r6-border-subtle);
  box-shadow: var(--r6-shadow-lg);
}

.r6-an-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  filter: grayscale(20%);
  transition: filter var(--r6-transition-base);
}

.r6-an-figure:hover img {
  filter: grayscale(0%);
}

.r6-an-figure-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--r6-gray-200);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
}

/* —— 核心指标 省/快/好 —— */
.r6-an-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
}

.r6-an-metric {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r6-radius-lg);
  background: var(--r6-gray-900);
  border: 1px solid var(--r6-border-subtle);
  text-align: center;
}

.r6-an-metric-value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: var(--r6-gradient-logo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.r6-an-metric-label {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  color: var(--r6-white);
  margin-bottom: 0.75rem;
}

.r6-an-metric-desc {
  font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
  line-height: 1.65;
  color: var(--r6-gray-400);
  margin: 0;
  text-align: left;
}

/* —— 模式对比 —— */
.r6-an-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
}

.r6-an-compare-col {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r6-radius-lg);
  border: 1px solid var(--r6-border-dark);
}

.r6-an-compare-col--trad {
  background: var(--r6-gray-100);
}

.r6-an-compare-col--native {
  background: var(--r6-gray-900);
  border-color: var(--r6-border-subtle);
}

.r6-an-compare-head {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--r6-border-dark);
}

.r6-an-compare-col--native .r6-an-compare-head {
  color: var(--r6-white);
  border-bottom-color: var(--r6-border-subtle);
}

.r6-an-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.r6-an-compare-list li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.625rem;
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
  line-height: 1.6;
}

.r6-an-compare-col--trad .r6-an-compare-list li {
  color: var(--r6-text-dark-secondary);
}

.r6-an-compare-col--native .r6-an-compare-list li {
  color: var(--r6-gray-300);
}

.r6-an-compare-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r6-gray-500);
}

.r6-an-compare-col--native .r6-an-compare-list li::before {
  background: var(--r6-gray-400);
}

/* —— 阶段对比 —— */
.r6-an-phases {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  width: 100%;
}

.r6-an-phase {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r6-radius-lg);
  background: var(--r6-white);
  border: 1px solid var(--r6-border-dark);
  align-items: start;
}

.r6-an-phase-label {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  color: var(--r6-gray-900);
  padding-top: 0.125rem;
}

.r6-an-phase-box {
  padding: 1rem;
  border-radius: var(--r6-radius-md);
  background: var(--r6-gray-50);
  border: 1px solid var(--r6-border-dark);
}

.r6-an-phase-box--native {
  background: var(--r6-gray-900);
  border-color: var(--r6-border-subtle);
}

.r6-an-phase-box-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--r6-gray-500);
  margin-bottom: 0.5rem;
}

.r6-an-phase-box--native .r6-an-phase-box-title {
  color: var(--r6-gray-400);
}

.r6-an-phase-box-text {
  font-size: clamp(0.8125rem, 1.3vw, 0.875rem);
  line-height: 1.65;
  color: var(--r6-text-dark-secondary);
  margin: 0;
}

.r6-an-phase-box--native .r6-an-phase-box-text {
  color: var(--r6-gray-300);
}

/* —— 核心角色 —— */
.r6-an-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
}

.r6-an-role {
  display: grid;
  grid-template-rows: auto;
  border-radius: var(--r6-radius-lg);
  overflow: hidden;
  border: 1px solid var(--r6-border-subtle);
  background: var(--r6-gray-900);
}

.r6-an-role-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 0.5rem;
  color: var(--r6-gray-500);
}

.r6-an-role-icon svg {
  width: 48px;
  height: 48px;
}

.r6-an-role-body {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.r6-an-role-title {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--r6-white);
  margin-bottom: 0.75rem;
}

.r6-an-role-desc {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
  line-height: 1.7;
  color: var(--r6-gray-400);
  margin: 0;
}

/* —— 原则卡片 —— */
.r6-an-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
}

.r6-an-principle {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r6-radius-lg);
  background: var(--r6-white);
  border: 1px solid var(--r6-border-dark);
  box-shadow: var(--r6-shadow-sm);
}

.r6-an-principle-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--r6-gray-500);
  margin-bottom: 0.625rem;
}

.r6-an-principle-title {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  color: var(--r6-gray-900);
  margin-bottom: 0.625rem;
}

.r6-an-principle-desc {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
  line-height: 1.7;
  color: var(--r6-text-dark-secondary);
  margin: 0;
}

/* —— 项目展示图集 —— */
.r6-an-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1rem);
  width: 100%;
}

.r6-an-gallery-item {
  position: relative;
  border-radius: var(--r6-radius-md);
  overflow: hidden;
  border: 1px solid var(--r6-border-dark);
  aspect-ratio: 16 / 10;
}

.r6-an-gallery-item:hover img {
  filter: grayscale(0%);
}

/* —— 范式本质：AI Native ≠ AI Coding —— */
.r6-an-philosophy-lead {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.85;
  color: var(--r6-gray-300);
  max-width: 920px;
  margin: 0 0 1.5rem;
}

.r6-an-contrast {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.r6-an-contrast-card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r6-radius-lg);
  border: 1px solid var(--r6-border-subtle);
}

.r6-an-contrast-card--coding {
  background: var(--r6-gray-100);
  border-color: var(--r6-border-dark);
}

.r6-an-contrast-card--native {
  background: var(--r6-gray-900);
}

.r6-an-contrast-title {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.r6-an-contrast-card--coding .r6-an-contrast-title {
  color: var(--r6-gray-700);
}

.r6-an-contrast-card--native .r6-an-contrast-title {
  color: var(--r6-white);
}

.r6-an-contrast-desc {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
  line-height: 1.7;
  margin: 0;
}

.r6-an-contrast-card--coding .r6-an-contrast-desc {
  color: var(--r6-text-dark-secondary);
}

.r6-an-contrast-card--native .r6-an-contrast-desc {
  color: var(--r6-gray-400);
}

.r6-an-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.r6-an-pillar {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r6-radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--r6-border-subtle);
}

.r6-an-pillar-title {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  color: var(--r6-white);
  margin-bottom: 0.5rem;
}

.r6-an-pillar-desc {
  font-size: clamp(0.8125rem, 1.3vw, 0.875rem);
  line-height: 1.65;
  color: var(--r6-gray-400);
  margin: 0;
}

.r6-an-summary {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r6-radius-lg);
  border: 1px dashed var(--r6-border-subtle);
  background: rgba(255, 255, 255, 0.04);
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.8;
  color: var(--r6-gray-300);
}

/* —— 交付范式：双路径对比 —— */
.r6-an-lanes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.r6-an-lane {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r6-radius-lg);
  border: 1px solid var(--r6-border-dark);
}

.r6-an-lane--legacy {
  background: var(--r6-gray-100);
}

.r6-an-lane--native {
  background: var(--r6-gray-900);
  border-color: var(--r6-border-subtle);
}

.r6-an-lane-title {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.r6-an-lane--legacy .r6-an-lane-title {
  color: var(--r6-gray-900);
}

.r6-an-lane--native .r6-an-lane-title {
  color: var(--r6-white);
}

.r6-an-lane-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.r6-an-lane-chip {
  padding: 0.625rem 0.875rem;
  border-radius: var(--r6-radius-md);
  font-size: clamp(0.8125rem, 1.3vw, 0.875rem);
  line-height: 1.55;
  border: 1px solid var(--r6-border-dark);
  background: var(--r6-white);
  color: var(--r6-text-dark-secondary);
}

.r6-an-lane--native .r6-an-lane-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--r6-border-subtle);
  color: var(--r6-gray-300);
}

.r6-an-lane-arrow {
  text-align: center;
  color: var(--r6-gray-500);
  font-size: 0.875rem;
  line-height: 1;
}

.r6-an-lane-tag {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.r6-an-lane-tag--muted {
  background: var(--r6-gray-200);
  color: var(--r6-gray-600);
  border: 1px dashed var(--r6-border-dark);
}

.r6-an-lane-tag--hot {
  background: rgba(255, 255, 255, 0.1);
  color: var(--r6-gray-200);
  border: 1px solid var(--r6-border-subtle);
}

/* —— SVG / HTML 图示容器 —— */
.r6-an-viz {
  width: 100%;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r6-radius-lg);
  border: 1px solid var(--r6-border-dark);
  background: var(--r6-white);
  overflow-x: auto;
}

.r6-an-viz--dark {
  background: var(--r6-gray-900);
  border-color: var(--r6-border-subtle);
}

.r6-an-viz-caption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--r6-gray-500);
  text-align: center;
}

.r6-an-viz--dark + .r6-an-viz-caption,
.r6-section-dark-alt .r6-an-viz-caption {
  color: var(--r6-gray-400);
}

.r6-an-viz svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 280px;
}

.r6-an-viz-title {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  color: var(--r6-gray-900);
  margin-bottom: 1rem;
  text-align: center;
}

.r6-an-viz--dark .r6-an-viz-title {
  color: var(--r6-white);
}

/* —— 团队组织 HTML 图示（还原 PDF 能力页） —— */
.r6-an-team-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0.75rem;
  align-items: stretch;
}

.r6-an-team-col-head {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
  border-radius: var(--r6-radius-sm);
  margin-bottom: 0.5rem;
}

.r6-an-team-col-head--trad {
  background: var(--r6-gray-100);
  color: var(--r6-gray-600);
}

.r6-an-team-col--native {
  padding: 0.625rem;
  border-radius: var(--r6-radius-md);
  background: var(--r6-gray-900);
}

.r6-an-team-col-head--native {
  background: rgba(255, 255, 255, 0.08);
  color: var(--r6-gray-200);
}

.r6-an-team-node {
  padding: 0.5rem 0.625rem;
  border-radius: var(--r6-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.375rem;
  border: 1px solid var(--r6-border-dark);
  background: var(--r6-gray-50);
  color: var(--r6-text-dark-secondary);
}

.r6-an-team-col--native .r6-an-team-node {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--r6-border-subtle);
  color: var(--r6-gray-300);
}

.r6-an-team-phase {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--r6-gray-500);
  letter-spacing: 0.08em;
}

.r6-an-team-row {
  display: contents;
}

/* —— 旧系统翻新：流程步骤 —— */
.r6-an-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem 0.5rem;
}

.r6-an-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.875rem;
  min-width: 5.5rem;
  border-radius: var(--r6-radius-md);
  border: 1px solid var(--r6-border-subtle);
  background: rgba(255, 255, 255, 0.04);
}

.r6-an-step--hub {
  border-color: var(--r6-gray-500);
  background: rgba(255, 255, 255, 0.08);
}

.r6-an-step-num {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--r6-gray-500);
}

.r6-an-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--r6-gray-200);
  text-align: center;
  line-height: 1.4;
}

.r6-an-step--hub .r6-an-step-label {
  color: var(--r6-white);
}

.r6-an-step-arrow {
  color: var(--r6-gray-500);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.r6-an-lanes + .r6-an-viz,
.r6-an-viz--dark + .r6-an-pillars {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.r6-an-pillars + .r6-an-summary {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* —— 交付成果：外层一行两类型，内层截图两列 —— */
.r6-an-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  align-items: stretch;
}

.r6-an-showcase-project {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
  border-radius: var(--r6-radius-lg);
  border: 1px solid var(--r6-border-subtle);
  background: rgba(255, 255, 255, 0.03);
}

.r6-an-showcase-head {
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  padding-bottom: clamp(0.625rem, 1.2vw, 0.875rem);
  border-bottom: 1px solid var(--r6-border-subtle);
}

.r6-an-showcase-title {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  color: var(--r6-white);
  margin-bottom: 0.375rem;
}

.r6-an-showcase-desc {
  font-size: clamp(0.75rem, 1.2vw, 0.8125rem);
  line-height: 1.6;
  color: var(--r6-gray-400);
  margin: 0;
  max-width: none;
}

.r6-an-showcase-grid {
  display: grid;
  gap: clamp(0.5rem, 1vw, 0.625rem);
  width: 100%;
  flex: 1;
}

/* 内层截图两列；奇数张第三张居中 */
.r6-an-showcase-grid--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
}

/* 小程序：两行三列（第 3、4 组），撑满卡片高度 */
.r6-an-showcase-grid--phone-rows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  flex: 1;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.r6-an-showcase-grid--three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
  align-items: end;
}

.r6-an-showcase-figure--solo,
.r6-an-showcase-figure--center {
  grid-column: 1 / -1;
}

.r6-an-showcase-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.r6-an-showcase-frame {
  width: 100%;
  border-radius: var(--r6-radius-md);
  overflow: hidden;
  border: 1px solid var(--r6-border-subtle);
  background: var(--r6-gray-950);
  box-shadow: var(--r6-shadow-sm);
}

.r6-an-showcase-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.r6-an-showcase-caption {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--r6-gray-500);
  text-align: center;
}

/* 桌面 / Web 宽屏截图 */
.r6-an-showcase-grid--wide .r6-an-showcase-frame {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.r6-an-showcase-grid--wide .r6-an-showcase-figure--solo .r6-an-showcase-frame {
  max-width: min(100%, 400px);
}

/* 小程序竖屏：单行放大，容器贴合截图避免两侧黑边 */
.r6-an-showcase-grid--phone .r6-an-showcase-figure {
  align-items: center;
}

.r6-an-showcase-grid--phone .r6-an-showcase-frame {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.r6-an-showcase-grid--phone .r6-an-showcase-frame img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  object-position: top center;
  margin: 0 auto;
}

/* 两行布局时单屏略增高，与右侧 Web 截图视觉平衡 */
.r6-an-showcase-grid--phone-rows .r6-an-showcase-frame img {
  max-height: 270px;
}

.r6-an-showcase-grid--phone-rows .r6-an-showcase-figure {
  height: 100%;
  min-height: 0;
  justify-content: flex-end;
}

/* —— 角色卡片：纯文本 + 节点，不用低分辨率大图 —— */
.r6-an-role-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.r6-an-role-node {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid var(--r6-border-subtle);
  color: var(--r6-gray-400);
  background: rgba(255, 255, 255, 0.04);
}


.r6-an-gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--r6-white);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
}

/* —— 结语 —— */
.r6-an-closing {
  width: 100%;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r6-radius-lg);
  background: var(--r6-gradient-dark);
  border: 1px solid var(--r6-border-subtle);
  text-align: center;
}

.r6-an-closing-title {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--r6-white);
  margin-bottom: 1rem;
}

.r6-an-closing-desc {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.8;
  color: var(--r6-gray-300);
  max-width: 720px;
  margin: 0 auto 1.5rem;
}

/* —— 响应式 —— */
@media (max-width: 991.98px) {
  .r6-an-split,
  .r6-an-split--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .r6-an-metrics,
  .r6-an-compare,
  .r6-an-roles,
  .r6-an-principles,
  .r6-an-contrast,
  .r6-an-pillars,
  .r6-an-lanes {
    grid-template-columns: 1fr;
  }

  .r6-an-team-grid {
    grid-template-columns: 1fr;
  }

  .r6-an-team-phase {
    writing-mode: horizontal-tb;
    padding: 0.5rem 0;
  }

  .r6-an-phase {
    grid-template-columns: 1fr;
  }

  /* 平板及以下：项目类型改单列 */
  .r6-an-showcase {
    grid-template-columns: 1fr;
  }

  .r6-an-gallery,
  .r6-an-showcase-grid--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .r6-an-showcase-grid--phone .r6-an-showcase-frame img {
    max-height: 200px;
  }

  .r6-an-showcase-grid--wide .r6-an-showcase-figure--solo .r6-an-showcase-frame {
    max-width: min(100%, 360px);
  }

  .r6-an-showcase-grid--phone-rows .r6-an-showcase-frame img {
    max-height: 220px;
  }

  .r6-an-showcase-grid--three-col,
  .r6-an-showcase-grid--phone-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .r6-an-metrics {
    grid-template-columns: 1fr;
  }

  .r6-an-showcase-grid--two-col,
  .r6-an-showcase-grid--three-col,
  .r6-an-showcase-grid--phone-rows {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .r6-an-showcase-figure--solo,
  .r6-an-showcase-figure--center {
    grid-column: auto;
  }
}