/* ============================================================================
   BaoCut 2.0 homepage — hero, product screenshots, feature sections.
   Builds on site.css (nav, footer, download band, feature lists) and only
   adds what the screenshot-led layout needs. Tokens only, plus the literal
   shadow tints site.css already uses on screenshot-like surfaces.
   ========================================================================== */

/* ---- Product screenshots ---------------------------------------------------
   The images are real window captures: the window's rounded corners are
   transparent pixels, so the shadow is a drop-shadow that follows the alpha
   edge (a box-shadow or border would draw a square frame around them). */
.bao-shot { position: relative; margin: 0; }
.bao-shot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 2px 4px rgba(15, 16, 30, 0.16))
    drop-shadow(0 28px 48px rgba(15, 16, 30, 0.26));
}
/* The app is dark; on the dark page give its edge a hairline so it does not
   dissolve into the background. */
.spectrum-dark .bao-shot img {
  filter:
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.5))
    drop-shadow(0 28px 56px rgba(0, 0, 0, 0.55));
}

/* ============================================================================
   Hero — centered copy over the full editor
   ========================================================================== */
.bao-top { position: relative; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(56px, 7vw, 96px); }
.bao-top__copy {
  display: grid;
  justify-items: center;
  gap: var(--spacing-400);
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.bao-top__copy .bao-lede { max-width: 720px; }
.bao-top__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  height: 36px;
  padding: 0 var(--spacing-200) 0 5px;
  border: var(--border-width-100) solid var(--border-default);
  border-radius: var(--corner-radius-full);
  background: var(--surface-layer-1);
  color: var(--text-body);
  font-size: var(--font-size-75);
  font-weight: var(--medium-font-weight);
  text-decoration: none;
  transition: border-color 130ms ease, background-color 130ms ease;
}
.bao-top__tag:hover { border-color: var(--border-strong); background: var(--surface-layer-2); }
.bao-top__tag .s2-badge { border-radius: var(--corner-radius-full); }
.bao-top__tag .s2-icon { --s2-icon-size: 14px; color: var(--text-subdued); }
.bao-top__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-200); }
.bao-top__meta { justify-content: center; }
.bao-top__meta a { color: var(--text-accent); text-decoration: none; font-weight: var(--medium-font-weight); }
.bao-top__meta a:hover { text-decoration: underline; }

.bao-top__shot { max-width: 1240px; margin: clamp(40px, 6vw, 72px) auto 0; }
.bao-top__glow {
  position: absolute;
  inset: 6% 2% -8% 2%;
  z-index: 0;
  background: radial-gradient(50% 55% at 50% 42%, color-mix(in oklab, var(--bao-coral) 40%, transparent), transparent 72%);
  filter: blur(42px);
  pointer-events: none;
}

/* ---- Quick links to the four features ------------------------------------ */
.bao-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-200);
  margin-top: clamp(40px, 5vw, 64px);
}
.bao-quick__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-200);
  padding: var(--spacing-300);
  border: var(--border-width-100) solid var(--border-default);
  border-radius: var(--corner-radius-extra-large-default);
  background: var(--surface-layer-1);
  color: inherit;
  text-decoration: none;
  transition: border-color 130ms ease, transform 130ms ease;
}
.bao-quick__item:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.bao-quick__item .bao-tile { width: 44px; height: 44px; }
.bao-quick__item .bao-tile .s2-icon { --s2-icon-size: 22px; }
.bao-quick__text { display: grid; gap: 2px; }
.bao-quick__text strong { color: var(--text-heading); font-size: var(--font-size-200); font-weight: var(--extra-bold-font-weight); letter-spacing: -0.01em; }
.bao-quick__text span { color: var(--text-subdued); font-size: var(--font-size-75); line-height: 1.45; }

/* "文A" tile for translation — S2 has no translate glyph. */
.bao-tile--text { font-size: 17px; font-weight: var(--black-font-weight); letter-spacing: -0.02em; line-height: 1; }
.bao-quick__item .bao-tile--text { font-size: 15px; }

/* ============================================================================
   Feature sections — copy on top, the real screen below
   ========================================================================== */
.bao-show--alt { background: var(--bao-wash); border-block: var(--border-width-100) solid var(--border-default); }
.bao-show__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.bao-show__title { display: grid; gap: var(--spacing-300); align-content: start; }
.bao-show__body { display: grid; gap: var(--spacing-300); padding-top: 4px; }
.bao-show .bao-shot { max-width: 1240px; margin-inline: auto; }

/* ---- Agent: the thread, with the ask box overlapping it ------------------ */
.bao-duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 1240px; margin-inline: auto; }
.bao-duo > .bao-shot { grid-row: 1; margin: 0; }
.bao-duo__main { grid-column: 4 / 13; }
.bao-duo > .bao-duo__inset { grid-column: 1 / 7; align-self: start; margin-top: 14%; z-index: 2; }
.bao-duo__inset img {
  border-radius: var(--corner-radius-extra-large-default);
  outline: var(--border-width-100) solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  filter: none;
  box-shadow: 0 2px 6px rgba(15, 16, 30, 0.2), 0 30px 60px -12px rgba(15, 16, 30, 0.45);
}
.spectrum-dark .bao-duo__inset img { filter: none; box-shadow: 0 30px 60px -8px rgba(0, 0, 0, 0.7); }

/* Step label pinned to a screenshot's top edge. */
.bao-step {
  position: absolute;
  z-index: 3;
  top: -15px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  height: 30px;
  padding: 0 var(--spacing-200) 0 4px;
  border: var(--border-width-100) solid var(--border-default);
  border-radius: var(--corner-radius-full);
  background: var(--surface-elevated);
  color: var(--text-heading);
  font-size: var(--font-size-75);
  font-weight: var(--bold-font-weight);
  box-shadow: var(--shadow-emphasized);
  white-space: nowrap;
}
.bao-step b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--corner-radius-full);
  background: var(--accent-background-color-default);
  color: #fff;
  font-size: 12px;
}
.bao-duo__main .bao-step { left: auto; right: 28px; }

/* ============================================================================
   "The rest of the editor" grid
   ========================================================================== */
.bao-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-300);
  margin-top: clamp(36px, 5vw, 56px);
}
.bao-more__card {
  display: grid;
  gap: var(--spacing-200);
  align-content: start;
  padding: var(--spacing-400);
  border: var(--border-width-100) solid var(--border-default);
  border-radius: var(--corner-radius-extra-large-default);
  background: var(--surface-layer-1);
  color: inherit;
  text-decoration: none;
}
.bao-more__card .bao-tile { width: 44px; height: 44px; margin-bottom: 4px; }
.bao-more__card .bao-tile .s2-icon { --s2-icon-size: 22px; }
.bao-more__card h3 { margin: 0; color: var(--text-heading); font-size: var(--font-size-300); font-weight: var(--extra-bold-font-weight); letter-spacing: -0.01em; }
.bao-more__card p { margin: 0; color: var(--text-subdued); font-size: var(--font-size-100); line-height: 1.55; }
.bao-more__card--link { transition: border-color 130ms ease, transform 130ms ease; }
.bao-more__card--link:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.bao-more__go { display: inline-flex; align-items: center; gap: 4px; color: var(--text-accent); font-size: var(--font-size-100); font-weight: var(--bold-font-weight); }
.bao-more__go .s2-icon { --s2-icon-size: 14px; }

/* ============================================================================
   Download — release proof link and the 1.x card
   ========================================================================== */
.bao-download__proof { color: rgba(255, 255, 255, 0.9); font-size: 13px; text-underline-offset: 3px; }
.bao-download__proof:hover { color: #fff; }

.bao-prev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-300) var(--spacing-500);
  margin-top: var(--spacing-400);
  padding: var(--spacing-400) clamp(20px, 3vw, 40px);
  border: var(--border-width-100) solid var(--border-default);
  border-radius: var(--corner-radius-extra-large-default);
  background: var(--surface-layer-1);
}
.bao-prev__copy { display: grid; gap: var(--spacing-75); max-width: 560px; }
.bao-prev__copy h3 { margin: 0; color: var(--text-heading); font-size: var(--font-size-400); font-weight: var(--extra-bold-font-weight); letter-spacing: -0.01em; }
.bao-prev__copy p:not(.bao-eyebrow) { margin: 0; color: var(--text-subdued); font-size: var(--font-size-100); line-height: 1.55; }
.bao-prev__cta { display: flex; flex-wrap: wrap; gap: var(--spacing-200); }

/* ============================================================================
   Responsive (same breakpoints as site.css)
   ========================================================================== */
@media (max-width: 1000px) {
  .bao-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bao-show__head { grid-template-columns: 1fr; }
  .bao-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bao-duo { grid-template-columns: 1fr; gap: clamp(36px, 8vw, 48px); }
  .bao-duo > .bao-shot { grid-row: auto; grid-column: 1; }
  .bao-duo > .bao-duo__inset { order: -1; margin-top: 0; }
  .bao-duo__main .bao-step { left: 20px; right: auto; }
}
@media (max-width: 560px) {
  .bao-quick { grid-template-columns: 1fr; }
  .bao-more { grid-template-columns: 1fr; }
  .bao-quick__item { padding: var(--spacing-200) var(--spacing-300); align-items: center; }
  .bao-step { left: 12px; }
}