/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */
/* Hallmark · macrostructure: Product-led Index · compact header + featured query + searchable catalogue
 * theme: Cobalt (brand-anchored) · paper: oklch(97% 0.008 228) · accent: oklch(49% 0.135 151)
 * display: Space Grotesk / Microsoft YaHei · body: Microsoft YaHei · axes: light / geometric-sans / chromatic-green
 * studied: no · context: user-provided production page · contrast: pass (40–41) · nav: N6 · footer: Ft1
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57) · slop: pass (1–58) · v0.8.0
 */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  background: var(--hm-paper);
  color: var(--hm-ink);
  font-family: var(--hm-body);
}
* { letter-spacing: 0 !important; }
*:focus-visible { outline: 3px solid var(--hm-focus); outline-offset: 3px; }
[disabled], [aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.page { width: min(1360px, calc(100% - 48px)); padding: var(--hm-space-4) 0 var(--hm-space-8); }
.topbar {
  min-height: 58px;
  margin-bottom: var(--hm-space-4);
  padding-bottom: var(--hm-space-3);
  border-bottom: 1px solid var(--hm-rule-2);
}
.brand { color: var(--hm-ink); font-weight: 800; }
.brand-mark { border-radius: 8px; box-shadow: none; }
.topnav { flex-wrap: nowrap; }
.topnav a {
  min-height: 36px;
  padding: 0 var(--hm-space-3);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hm-ink-2);
  font-weight: 700;
  white-space: nowrap;
}
.topnav a:hover { background: var(--hm-paper-2); color: var(--hm-accent-dark); }
.topnav a:active { transform: translateY(1px); }
.topnav a:visited { color: var(--hm-ink-2); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--hm-space-6);
  min-height: 0;
  padding: 28px 0 40px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--hm-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero::after { display: none; }
.hero .eyebrow, .evolution-flow-head .eyebrow {
  color: var(--hm-accent-dark);
  font-size: 12px;
  font-weight: 800;
}
.eyebrow::before { width: 6px; height: 6px; background: var(--hm-accent); }
h1 {
  margin-top: var(--hm-space-3);
  max-width: none;
  font-family: var(--hm-display);
  font-size: clamp(36px, 4.3vw, 62px);
  font-weight: 900;
  line-height: 1.02;
  white-space: nowrap;
  overflow-wrap: anywhere;
  min-width: 0;
}
.lead { max-width: 690px; margin-top: var(--hm-space-4); color: var(--hm-ink-2); font-size: 17px; line-height: 1.75; }
.quick-actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; flex-wrap: nowrap; }
.button {
  min-height: 44px;
  border: 1px solid var(--hm-rule);
  border-radius: 8px;
  background: var(--hm-paper);
  color: var(--hm-ink);
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.button:hover { border-color: var(--hm-accent); color: var(--hm-accent-dark); transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button:visited { color: var(--hm-ink); }
.button.primary { border-color: var(--hm-accent-dark); background: var(--hm-accent-dark); color: var(--hm-accent-ink); }
.button.primary:hover { border-color: var(--hm-accent); background: var(--hm-accent); color: var(--hm-accent-ink); }
.button.primary:visited { color: var(--hm-accent-ink); }
.evolution-flow { margin-top: var(--hm-space-6); padding: var(--hm-space-5); border: 1px solid var(--hm-rule-2); border-radius: var(--hm-radius); background: var(--hm-paper-2); }
.evolution-flow-head { margin-bottom: var(--hm-space-3); }
.evolution-flow-head h2, .section-head h2 { color: var(--hm-ink); font-family: var(--hm-display); font-weight: 900; }
.evolution-flow-head p, .section-head p { color: var(--hm-muted); }
.evolution-flow-stage { min-height: clamp(360px, 44vw, 610px); }
.evolution-flow-caption { border-top-color: var(--hm-rule); }
#pages { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: var(--hm-space-6); align-items: start; margin-top: var(--hm-space-7); }
.section-head { position: sticky; top: var(--hm-space-4); grid-column: 1; margin: 0; padding: var(--hm-space-4) 0; }
.section-head h2 { font-size: 27px; line-height: 1.2; }
.section-head p { font-size: 14px; line-height: 1.7; }
.search-panel { position: sticky; top: var(--hm-space-4); z-index: 4; grid-column: 2; margin: 0 0 var(--hm-space-4); padding: var(--hm-space-3); border-color: var(--hm-rule); border-radius: 12px; background: var(--hm-glass); box-shadow: 0 8px 28px var(--hm-soft-shadow); backdrop-filter: blur(16px); }
.search-label { color: var(--hm-accent-dark); }
.search-box input { border-color: var(--hm-rule); border-radius: 8px; background: var(--hm-paper); color: var(--hm-ink); font-family: var(--hm-body); }
.search-box input:hover { border-color: var(--hm-accent); }
.search-box input:focus { border-color: var(--hm-focus); outline: 2px solid var(--hm-focus); outline-offset: 1px; box-shadow: 0 0 0 3px var(--hm-focus-wash); }
.search-tools button { border-color: var(--hm-rule); border-radius: 7px; background: var(--hm-paper); color: var(--hm-ink-2); font-family: var(--hm-body); white-space: nowrap; }
.search-tools button:hover { border-color: var(--hm-accent); background: var(--hm-paper-2); color: var(--hm-accent-dark); }
.search-tools button:active { transform: translateY(1px); }
.search-result { color: var(--hm-muted); }
.evolution-grid { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hm-space-4); }
.evolution-card {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--hm-rule-2);
  border-radius: var(--hm-radius);
  background: var(--hm-paper);
  box-shadow: none;
  contain-intrinsic-size: 420px 620px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.evolution-card:hover { transform: translateY(-3px); border-color: var(--hm-rule); box-shadow: var(--hm-shadow); }
.evolution-card.is-query-target { grid-column: 1 / -1; grid-template-columns: minmax(360px, 1.2fr) minmax(0, .8fr); border-color: var(--hm-accent); background: var(--hm-paper-2); }
.evolution-card.is-query-target::before { content: "当前产品主线"; position: absolute; z-index: 2; margin: 14px; padding: 6px 10px; border-radius: 6px; background: var(--hm-accent-dark); color: var(--hm-accent-ink); font-size: 12px; font-weight: 800; }
.thumb { aspect-ratio: 16 / 10; border-radius: 0; background: var(--hm-ink); box-shadow: none; }
.thumb img { height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .42s ease; }
.card-copy { justify-content: flex-start; padding: var(--hm-space-5); }
.meta { color: var(--hm-accent-dark); }
.meta span { border-radius: 5px; background: var(--hm-paper-2); }
.evolution-card h2 { color: var(--hm-ink); font-family: var(--hm-display); font-size: 22px; font-weight: 900; line-height: 1.25; }
.evolution-card p { color: var(--hm-muted); font-size: 14px; line-height: 1.75; }
.tags { gap: 6px; }
.tags span { min-height: 26px; border-color: var(--hm-rule-2); border-radius: 5px; background: var(--hm-paper-2); color: var(--hm-ink-2); }
.actions { margin-top: auto; padding-top: var(--hm-space-4); }
.note, footer { grid-column: 2; }
.note { border-color: var(--hm-rule); border-radius: 8px; background: var(--hm-paper-2); color: var(--hm-ink-2); }
footer { color: var(--hm-muted); }
.youyou-consult-float, .youyou-sites-hub-float { border-radius: 8px !important; }
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }
  .quick-actions { grid-column: 1; grid-row: auto; }
  #pages { grid-template-columns: 1fr; }
  .section-head, .search-panel, .evolution-grid, .note, footer { grid-column: 1; }
  .section-head { position: static; padding-top: 0; }
  .search-panel { top: 8px; }
}
@media (max-width: 760px) {
  .page { width: min(100% - 24px, 1360px); padding-top: var(--hm-space-2); }
  .topbar { align-items: center; flex-direction: row; min-height: 50px; }
  .brand span { display: none; }
  .topnav { gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { min-height: 38px; padding: 0 9px; font-size: 12px; }
  .hero { gap: var(--hm-space-4); padding: var(--hm-space-5) 0; }
  h1 { font-size: clamp(30px, 9.4vw, 44px); white-space: normal; }
  .lead { margin-top: var(--hm-space-3); font-size: 15px; }
  .quick-actions { width: 100%; }
  .quick-actions .button { flex: 1; padding-inline: 12px; }
  .evolution-flow { margin-top: var(--hm-space-4); padding: var(--hm-space-3); }
  .evolution-flow-stage { min-height: 380px; }
  #pages { margin-top: var(--hm-space-6); }
  .search-panel { position: static; }
  .search-tools { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .search-result { position: absolute; right: 12px; top: 12px; }
  .evolution-grid { grid-template-columns: minmax(0, 1fr); }
  .evolution-card.is-query-target { grid-column: auto; grid-template-columns: 1fr; }
  .card-copy { padding: var(--hm-space-4); }
  .evolution-card h2 { font-size: 20px; }
  .actions { flex-wrap: nowrap; }
  .actions .button { width: auto; flex: 1; padding-inline: 10px; font-size: 13px; }
}
@media (max-width: 420px) {
  .page { width: min(100% - 20px, 1360px); }
  .topnav a:nth-child(2), .topnav a:nth-child(3) { display: none; }
  .quick-actions { flex-direction: column; }
  .quick-actions .button { width: 100%; }
  .evolution-flow-stage { min-height: 340px; }
  .search-result { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}