/* Chrono Bee 产品落地页 — 对齐 AI之道设计系统
   标志性结构：Day Tape（一天拆成片段）
   Token 层来自 chronobee-doc.css，本文件只消费 L2 / L3。 */

body.cb-landing {
  color: var(--text);
  background-color: var(--background);
}

.cb-shell {
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.doc-topbar-inner.cb-shell {
  max-width: calc(var(--shell) + 2.5rem);
}

body.cb-landing .doc-brand {
  font-size: var(--fs-display-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

body.cb-landing .doc-product {
  color: var(--text-muted);
}

/* ============================================
   Hero
   ============================================ */
.cb-hero {
  padding: var(--space-9) 0 0;
}

.cb-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-width: 0;
  padding-bottom: var(--space-6);
  text-align: center;
}

.cb-hero-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.cb-hero-logo {
  display: block;
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  object-fit: contain;
}

.cb-hero-brand {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-display-xxl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
  white-space: nowrap;
}

/* 类名沿用历史命名，实现已改为扁平实色 */
.cb-hero-brand .text-gradient {
  color: var(--accent-strong);
}

.cb-hero-shots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  padding-bottom: var(--space-6);
}

.cb-hero-track {
  position: relative;
  aspect-ratio: 1024 / 768;
  min-width: 0;
}

.cb-hero-shots figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cb-hero-shots figure.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.cb-hero-shots img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cb-hero-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.cb-hero-dots button {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-round);
  background: transparent;
  cursor: pointer;
}

.cb-hero-dots button.is-active {
  background: var(--text);
  border-color: var(--text);
}

.cb-hero-dots button:focus-visible {
  outline: var(--focus-w) solid var(--text);
  outline-offset: var(--focus-offset);
}

.cb-hero h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  white-space: nowrap;
}

.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.cb-hero-copy .cb-actions {
  justify-content: center;
  margin-top: var(--space-1);
}

/* ============================================
   CTA — 与主站 .btn 同构：基础类 + 变体只重指变量
   ============================================ */
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 3rem;
  padding: var(--space-3) var(--space-6);

  border: var(--border-w) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-text);

  font-family: var(--font-sans);
  font-size: var(--fs-detail-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  white-space: nowrap;

  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);

  --btn-bg: var(--button-primary-bg);
  --btn-border: var(--button-primary-border);
  --btn-text: var(--button-primary-text);
  --btn-bg-hover: var(--button-primary-bg-hover);
  --btn-border-hover: var(--button-primary-border-hover);
  --btn-text-hover: var(--button-primary-text-hover);
}

.cb-btn:hover,
.cb-btn:focus-visible {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-text-hover);
}

.cb-btn-primary {
  --btn-bg: var(--button-primary-bg);
  --btn-border: var(--button-primary-border);
  --btn-text: var(--button-primary-text);
  --btn-bg-hover: var(--button-primary-bg-hover);
  --btn-border-hover: var(--button-primary-border-hover);
  --btn-text-hover: var(--button-primary-text-hover);
}

.cb-btn-ghost {
  --btn-bg: var(--button-secondary-bg);
  --btn-border: var(--button-secondary-border);
  --btn-text: var(--button-secondary-text);
  --btn-bg-hover: var(--button-secondary-bg-hover);
  --btn-border-hover: var(--button-secondary-border-hover);
  --btn-text-hover: var(--button-secondary-text-hover);
}

/* ============================================
   Day Tape — 一天拆成片段
   ============================================ */
.cb-daytape {
  padding: var(--space-4) 0 var(--space-9);
  background: var(--surface);
  border-top: var(--border-w) solid var(--border);
  border-bottom: var(--border-w) solid var(--border);
}

.cb-daytape-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cb-daytape-track {
  display: grid;
  grid-template-columns: 1.4fr 2.2fr 1fr 0.8fr 1.8fr 1.2fr 1.6fr;
  gap: var(--space-1);
  width: 100%;
  max-width: calc(var(--shell) + 2.5rem);
  margin: 0 auto;
  padding: 0 var(--space-5);
  min-height: 3.5rem;
}

.cb-seg {
  display: flex;
  align-items: flex-end;
  padding: var(--space-2);
  min-width: 0;
  border-radius: var(--radius-sm);
  transform-origin: left center;
}

.cb-seg span {
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 色带用原语实色：这是数据可视化语义，不随主题反转 */
.cb-seg-a { background: var(--swatch-kraft); color: var(--swatch-slate-dark); }
.cb-seg-b { background: var(--swatch-slate-dark); color: var(--swatch-ivory-light); }
.cb-seg-c { background: var(--swatch-clay); color: var(--swatch-slate-dark); }
.cb-seg-d { background: var(--swatch-oat); color: var(--swatch-slate-dark); }
.cb-seg-e { background: var(--swatch-accent); color: var(--swatch-ivory-light); }

.cb-daytape-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  color: var(--text-muted);
}

/* ============================================
   区块
   ============================================ */
.cb-section {
  padding: var(--section-md) 0;
  border-bottom: var(--border-w) solid var(--border);
}

.cb-kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cb-section h2,
.cb-pro h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  text-wrap: balance;
}

.cb-lede,
.cb-section > p {
  margin: 0 0 var(--space-4);
  max-width: 28em;
  font-family: var(--font-serif);
  font-size: var(--fs-para-s);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.cb-card-grid {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.cb-card-grid-features,
.cb-card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-card-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cb-card-grid > li {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: var(--space-5);
}

.cb-card-grid time,
.cb-card-idx {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  color: var(--accent-strong);
}

.cb-card-grid h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-detail-l);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.cb-card-grid p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-para-xs);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

/* ============================================
   Pro — 深色带，直接挂主题作用域，内部元素自动换色
   ============================================ */
.cb-pro {
  padding: var(--section-md) 0;

  /* 深色主题语义（与 chronobee-doc.css 的 .theme-dark 一致） */
  --background: var(--swatch-slate-dark);
  --surface: var(--swatch-slate-medium);
  --card: var(--swatch-slate-medium);
  --surface-hover: var(--swatch-slate-light);
  --text: var(--swatch-ivory-light);
  --text-muted: var(--swatch-cloud-light);
  --border: var(--swatch-ivory-a10);
  --border-hover: var(--swatch-ivory-a20);
  --link: var(--swatch-ivory-light);
  --link-hover: var(--swatch-kraft);
  --accent: var(--swatch-clay);
  --accent-strong: var(--swatch-kraft);

  --button-primary-bg: var(--swatch-ivory-light);
  --button-primary-border: var(--swatch-ivory-light);
  --button-primary-text: var(--swatch-slate-dark);
  --button-primary-bg-hover: var(--swatch-ivory-medium);
  --button-primary-border-hover: var(--swatch-ivory-medium);
  --button-primary-text-hover: var(--swatch-slate-dark);

  --button-secondary-bg: var(--swatch-transparent);
  --button-secondary-border: var(--swatch-ivory-light);
  --button-secondary-text: var(--swatch-ivory-light);
  --button-secondary-bg-hover: var(--swatch-ivory-light);
  --button-secondary-border-hover: var(--swatch-ivory-light);
  --button-secondary-text-hover: var(--swatch-slate-dark);

  background: var(--background);
  color: var(--text-muted);
  border-top: var(--border-w) solid var(--border);
  border-bottom: var(--border-w) solid var(--border);
}

.cb-lead-strong {
  margin: 0 0 var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--fs-para-s);
  line-height: var(--lh-loose);
  color: var(--text);
}

.cb-pro .cb-card-grid {
  margin-bottom: var(--space-6);
}

.cb-pro .cb-actions {
  justify-content: center;
}

/* ---- FAQ ---- */
.cb-faq details {
  border-bottom: var(--border-w) solid var(--border);
  padding: var(--space-4) 0;
}

.cb-faq details:first-of-type {
  border-top: var(--border-w) solid var(--border);
  margin-top: var(--space-5);
}

.cb-faq summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-detail-l);
  font-weight: var(--fw-semibold);
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  white-space: nowrap;
}

.cb-faq summary::-webkit-details-marker {
  display: none;
}

.cb-faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  font-size: var(--fs-detail-l);
  flex-shrink: 0;
}

.cb-faq details[open] summary::after {
  content: '−';
}

.cb-faq details p {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--fs-para-xs);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================
   收尾
   ============================================ */
.cb-close {
  text-align: center;
  padding: var(--section-md) 0 var(--space-5);
}

.cb-close-tape {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin: 0 auto var(--space-6);
  max-width: 14rem;
}

.cb-close-tape span {
  height: 0.45rem;
  border-radius: var(--radius-sm);
  flex: 1;
}

.cb-close-tape span:nth-child(1) { background: var(--swatch-kraft); }
.cb-close-tape span:nth-child(2) { background: var(--swatch-slate-dark); flex: 1.4; }
.cb-close-tape span:nth-child(3) { background: var(--swatch-clay); }
.cb-close-tape span:nth-child(4) { background: var(--swatch-accent); flex: 0.8; }
.cb-close-tape span:nth-child(5) { background: var(--swatch-oat); }

.cb-close h2 {
  margin: 0 auto var(--space-3);
  max-width: 24ch;
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  text-wrap: balance;
}

.cb-close p {
  margin: 0 auto var(--space-6);
  max-width: 40ch;
  font-family: var(--font-serif);
  font-size: var(--fs-para-s);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  text-wrap: pretty;
}

.cb-close .cb-actions {
  justify-content: center;
}

.cb-page-footer {
  margin-top: var(--space-7);
  padding: var(--space-5) 0 var(--space-10);
}

/* ============================================
   动效 — 默认不生效，仅 no-preference 下播放
   ============================================ */
@keyframes cb-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cb-seg-in {
  from {
    opacity: 0;
    transform: scaleX(0.35);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cb-hero-copy {
    animation: cb-rise var(--dur-reveal) var(--ease-out-expo) both;
  }

  .cb-hero-shots figure {
    transition: opacity var(--dur-reveal) var(--ease-out-expo);
  }

  .cb-seg {
    animation: cb-seg-in 0.75s var(--ease-out-expo) both;
  }

  .cb-seg:nth-child(1) { animation-delay: 0.05s; }
  .cb-seg:nth-child(2) { animation-delay: 0.12s; }
  .cb-seg:nth-child(3) { animation-delay: 0.19s; }
  .cb-seg:nth-child(4) { animation-delay: 0.26s; }
  .cb-seg:nth-child(5) { animation-delay: 0.33s; }
  .cb-seg:nth-child(6) { animation-delay: 0.4s; }
  .cb-seg:nth-child(7) { animation-delay: 0.47s; }
}

/* ============================================
   响应式 — 只做布局重排
   ============================================ */
@media (max-width: 639.98px) {
  .cb-hero h1 {
    font-size: clamp(1.15rem, 5vw, var(--fs-display-m));
  }

  .cb-faq details p {
    font-size: clamp(0.85rem, 3.2vw, var(--fs-para-xs));
  }

  .cb-card-grid-features,
  .cb-card-grid-3,
  .cb-card-grid-4 {
    grid-template-columns: 1fr;
  }

  .cb-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 20rem;
    margin-inline: auto;
  }

  .cb-close .cb-actions {
    margin-inline: auto;
  }
}