/* ============================================================================
   BaoCut marketing site — layout + product-UI mockups
   All values via Spectrum 2 tokens (var(--*)) or the brand.css brand vars.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.bao-page { overflow-x: clip; }

.bao-wrap {
  width: 100%;
  max-width: var(--bao-page-max);
  margin-inline: auto;
  padding-inline: var(--bao-gutter);
}
.bao-wrap--wide { max-width: 1320px; }

.bao-section { padding-block: var(--bao-section-y); }
.bao-section--tight { padding-block: clamp(48px, 6vw, 88px); }

.bao-section-head { max-width: 720px; display: grid; gap: var(--spacing-200); }
.bao-section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ============================================================================
   Top navigation
   ========================================================================== */
.bao-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  border-bottom: var(--border-width-100) solid transparent;
}
.bao-nav.is-stuck {
  background: color-mix(in oklab, var(--surface-base) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--border-default);
}
.bao-nav__inner {
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--spacing-400);
}
.bao-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  font-weight: var(--extra-bold-font-weight);
  font-size: var(--font-size-300);
  letter-spacing: -0.02em;
  color: var(--text-heading);
  text-decoration: none;
  margin-right: auto;
}
.bao-brand img {
  width: 34px; height: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--bao-coral) 45%, transparent);
}
.bao-navlinks {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
}
.bao-navlink {
  padding: var(--spacing-85) var(--spacing-200);
  border-radius: var(--corner-radius-medium-default);
  font-size: var(--font-size-100);
  font-weight: var(--medium-font-weight);
  color: var(--text-body);
  text-decoration: none;
  transition: background-color 130ms ease, color 130ms ease;
}
.bao-navlink:hover { background: var(--gray-100); color: var(--text-heading); }
.bao-nav__actions { display: flex; align-items: center; gap: var(--spacing-100); }

.bao-iconbtn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: none; background: transparent;
  border-radius: var(--corner-radius-medium-default);
  color: var(--text-body);
  cursor: pointer;
  transition: background-color 130ms ease, transform 130ms ease;
}
.bao-iconbtn:hover { background: var(--gray-100); }
.bao-iconbtn:active { transform: scale(0.94); }
.bao-iconbtn .s2-icon { --s2-icon-size: 20px; }
.bao-iconbtn .s2-icon--moon-mask { display: none; }
.spectrum-dark .bao-iconbtn .s2-icon--sun-mask { display: none; }
.spectrum-dark .bao-iconbtn .s2-icon--moon-mask { display: inline-block; }

.bao-navtoggle { display: none; }

/* ============================================================================
   Hero
   ========================================================================== */
.bao-hero { position: relative; padding-top: clamp(28px, 5vw, 56px); }
.bao-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.bao-hero__copy { display: grid; gap: var(--spacing-400); max-width: 600px; }
.bao-hero__badges { display: flex; flex-wrap: wrap; gap: var(--spacing-100); }
.bao-hero__cta { display: flex; flex-wrap: wrap; gap: var(--spacing-200); align-items: center; }
.bao-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--spacing-75) var(--spacing-200);
  color: var(--text-subdued);
  font-size: var(--font-size-75);
}
.bao-hero__meta .dot { width: 3px; height: 3px; border-radius: 99px; background: currentColor; opacity: 0.5; }

.bao-hero__art { position: relative; }
.bao-hero__glow {
  position: absolute; inset: -8% -6% -12% -4%;
  background: radial-gradient(60% 60% at 62% 34%, color-mix(in oklab, var(--bao-coral) 42%, transparent), transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.bao-hero__art > .bao-win { position: relative; z-index: 1; }

/* floating app icon chip on the hero */
.bao-hero__appicon {
  position: absolute;
  z-index: 2;
  right: -14px; top: -30px;
  width: clamp(72px, 8vw, 104px);
  height: auto;
  filter: drop-shadow(0 16px 30px color-mix(in oklab, var(--bao-rose) 40%, transparent));
  animation: bao-float 6s ease-in-out infinite;
}
@keyframes bao-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .bao-hero__appicon { animation: none; } }

/* ============================================================================
   Product-UI window chrome (macOS)  — used across mockups
   ========================================================================== */
.bao-win {
  border-radius: var(--corner-radius-extra-large-default);
  background: var(--surface-elevated);
  border: var(--border-width-100) solid var(--border-default);
  box-shadow: var(--shadow-emphasized), 0 40px 80px -40px color-mix(in oklab, var(--gray-900) 40%, transparent);
  overflow: hidden;
}
.bao-win__bar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: var(--spacing-200);
  padding-inline: var(--spacing-200);
  background: var(--surface-layer-1);
  border-bottom: var(--border-width-100) solid var(--border-default);
}
.bao-lights { display: flex; gap: 8px; }
.bao-lights i { width: 12px; height: 12px; border-radius: 99px; display: block; }
.bao-lights i:nth-child(1) { background: #ff5f57; }
.bao-lights i:nth-child(2) { background: #febc2e; }
.bao-lights i:nth-child(3) { background: #28c840; }
.bao-win__title {
  font-size: var(--font-size-75);
  color: var(--text-subdued);
  font-weight: var(--medium-font-weight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bao-win__title strong { color: var(--text-body); font-weight: var(--bold-font-weight); }

/* ---- Hero editor mockup: stage + transcript + timeline -------------------- */
.bao-editor { display: grid; grid-template-rows: 1fr auto; }
.bao-editor__main { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 300px; }
.bao-stage {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 10%, #2b3350 0%, #171a2b 55%, #0f1119 100%);
  display: grid; place-items: end center;
  padding: var(--spacing-300);
  overflow: hidden;
}
.bao-stage__badge {
  position: absolute; top: var(--spacing-200); left: var(--spacing-200);
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 99px;
  background: rgba(255,255,255,0.14); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bao-stage__badge .s2-icon { --s2-icon-size: 13px; }
.bao-stage__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 99px;
  background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.5);
  display: grid; place-items: center; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bao-stage__play .s2-icon { --s2-icon-size: 22px; }
.bao-caption {
  position: relative; z-index: 1;
  max-width: 90%;
  text-align: center;
  font-weight: 800;
  font-size: clamp(15px, 1.7vw, 21px);
  line-height: 1.28;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  margin-bottom: 6px;
}
.bao-caption .w { transition: color 160ms ease; }
.bao-caption .w.on { color: #ffd36b; }
.bao-stage__tc {
  position: absolute; right: var(--spacing-200); bottom: var(--spacing-200);
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.35);
  padding: 2px 7px; border-radius: 6px;
}

.bao-tpanel { border-left: var(--border-width-100) solid var(--border-default); padding: var(--spacing-200); display: grid; gap: var(--spacing-100); align-content: start; background: var(--surface-elevated); }
.bao-speaker { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.bao-speaker .s2-avatar { width: 26px; height: 26px; font-size: 11px; }
.bao-speaker b { font-size: var(--font-size-75); color: var(--text-heading); }
.bao-speaker span { font-size: 11px; color: var(--text-subdued); }
.bao-tline {
  font-size: var(--font-size-100);
  line-height: 1.5;
  color: var(--text-body);
  padding: 3px 0;
}
.bao-tline .hl {
  background: var(--bao-wash-strong);
  color: var(--text-accent);
  border-radius: 4px; padding: 0 3px; font-weight: 600;
}
.bao-tline--muted { color: var(--text-subdued); }
.bao-cue {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: 8px; background: var(--surface-layer-1);
}
.bao-cue time { font-size: 10px; color: var(--text-subdued); font-variant-numeric: tabular-nums; }
.bao-cue p { margin: 0; font-size: var(--font-size-75); color: var(--text-body); }

.bao-timeline {
  border-top: var(--border-width-100) solid var(--border-default);
  background: var(--surface-layer-1);
  padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);
  display: grid; gap: 7px;
}
.bao-ruler { height: 12px; display: flex; align-items: flex-end; gap: 0; opacity: 0.6; }
.bao-ruler i { flex: 1; border-left: 1px solid var(--border-default); height: 6px; }
.bao-ruler i:nth-child(4n+1) { height: 11px; }
.bao-track { display: flex; gap: 6px; }
.bao-clip {
  height: 34px; border-radius: 7px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--red-500) 30%, var(--surface-elevated)), color-mix(in oklab, var(--red-500) 16%, var(--surface-elevated)));
  border: 1px solid color-mix(in oklab, var(--red-500) 40%, var(--border-default));
  position: relative;
}
.bao-clip--sel { outline: 2px solid var(--accent-color-900); outline-offset: 1px; }
.bao-clip.wave {
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in oklab, var(--red-600) 55%, transparent) 2px 3px),
    var(--surface-elevated);
}
.bao-playhead { width: 2px; background: var(--accent-color-900); border-radius: 2px; }

/* ============================================================================
   Pillars strip (3 differentiators)
   ========================================================================== */
.bao-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-400);
}
.bao-pillar { display: grid; gap: var(--spacing-200); align-content: start; }
.bao-pillar h3 { margin: 0; font-size: var(--font-size-300); font-weight: var(--extra-bold-font-weight); color: var(--text-heading); letter-spacing: -0.01em; }
.bao-pillar p { margin: 0; color: var(--text-subdued); font-size: var(--font-size-200); line-height: 1.55; }

/* "no cloud" mask overlay for the local-first tile */
.bao-tile--nocloud { position: relative; }
.bao-tile--nocloud::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: linear-gradient(135deg, transparent 44%, #000 46%, #000 54%, transparent 56%);
  mask: linear-gradient(135deg, transparent 44%, #000 46%, #000 54%, transparent 56%);
}

/* ============================================================================
   Alternating feature rows (Transcribe / Translate / Cut)
   ========================================================================== */
.bao-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.bao-feature + .bao-feature { margin-top: var(--bao-section-y); }
.bao-feature--flip .bao-feature__art { order: -1; }
.bao-feature__copy { display: grid; gap: var(--spacing-300); max-width: 520px; }
.bao-feature__eyebrow { display: flex; align-items: center; gap: var(--spacing-200); }
.bao-feature__list { display: grid; gap: var(--spacing-200); margin: 0; padding: 0; list-style: none; }
.bao-feature__list li { display: flex; gap: var(--spacing-200); align-items: flex-start; font-size: var(--font-size-200); color: var(--text-body); line-height: 1.5; }
.bao-feature__list .s2-icon { --s2-icon-size: 20px; color: var(--text-accent); flex-shrink: 0; margin-top: 1px; }
.bao-feature__art { position: relative; }

/* ---- Translate bilingual mockup ------------------------------------------ */
.bao-tr__head {
  display: flex; align-items: center; gap: var(--spacing-200);
  padding: var(--spacing-200) var(--spacing-300);
  border-bottom: var(--border-width-100) solid var(--border-default);
  background: var(--surface-elevated);
}
.bao-langpills { display: flex; gap: 6px; margin-left: auto; }
.bao-langpill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 99px;
  font-size: 12px; font-weight: 700;
  background: var(--surface-layer-1); color: var(--text-subdued);
  border: 1px solid var(--border-default);
}
.bao-langpill.on { background: var(--accent-color-900); color: #fff; border-color: transparent; }
.bao-tr__progress { display:flex; align-items:center; gap: 10px; padding: 10px var(--spacing-300); font-size: 11px; color: var(--text-subdued); border-bottom: 1px solid var(--border-default); background: var(--surface-layer-1); }
.bao-tr__bar { flex: 1; height: 5px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.bao-tr__bar i { display:block; height: 100%; width: 86%; background: var(--accent-color-900); border-radius: 99px; }
.bao-tr__cols { display: grid; grid-template-columns: 1fr 1fr; }
.bao-tr__col { padding: var(--spacing-200) var(--spacing-300); display: grid; gap: 2px; align-content: start; }
.bao-tr__col + .bao-tr__col { border-left: 1px solid var(--border-default); background: var(--surface-layer-1); }
.bao-tr__colhead { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subdued); font-weight: 700; margin-bottom: 6px; }
.bao-tr__row { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 7px 6px; border-radius: 8px; }
.bao-tr__row.on { background: var(--bao-wash); }
.bao-tr__row .n { font-size: 10px; color: var(--text-subdued); font-variant-numeric: tabular-nums; padding-top: 2px; }
.bao-tr__row .src { font-size: 13px; color: var(--text-body); line-height: 1.4; }
.bao-tr__zh { font-size: 14px; color: var(--text-heading); line-height: 1.55; }
.bao-tr__cps { display:flex; gap:6px; margin-top: 6px; }
.bao-tr__cps .bao-chip { height: 22px; font-size: 10px; padding: 0 8px; }
.bao-tr__cps .bao-chip.good { color: var(--positive-color-1100); border-color: color-mix(in oklab, var(--positive-color-900) 40%, var(--border-default)); }

/* ---- Document-editing mockup --------------------------------------------- */
.bao-doc { padding: var(--spacing-300) var(--spacing-400); display: grid; gap: var(--spacing-200); }
.bao-findbar {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 6px 0 12px; border-radius: 10px;
  background: var(--surface-layer-1); border: 1px solid var(--border-default);
  font-size: 13px; color: var(--text-subdued);
}
.bao-findbar .q { color: var(--text-heading); font-weight: 600; }
.bao-findbar .repl { margin-left: auto; display:flex; align-items:center; gap:6px; }
.bao-doc__para { font-size: 16px; line-height: 1.75; color: var(--text-body); }
.bao-doc__para .rep { background: var(--bao-wash-strong); color: var(--text-accent); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.bao-caret { display:inline-block; width:2px; height:1.05em; background: var(--accent-color-900); vertical-align: text-bottom; margin: 0 1px; animation: bao-blink 1.05s step-end infinite; }
@keyframes bao-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bao-caret { animation: none; } }
.bao-doc__hints { display: flex; flex-wrap: wrap; gap: 8px; }
.bao-kbd {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11px; color: var(--text-subdued);
}
.bao-kbd kbd {
  font-family: var(--font-family-code); font-size: 11px;
  background: var(--surface-layer-1); border: 1px solid var(--border-default);
  border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--text-body);
}

/* ============================================================================
   Local-first band
   ========================================================================== */
.bao-band { background: var(--bao-wash); border-block: var(--border-width-100) solid var(--border-default); }
.bao-flow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: stretch;
  margin-top: clamp(32px, 5vw, 56px);
}
.bao-flow__node {
  background: var(--surface-elevated);
  border: var(--border-width-100) solid var(--border-default);
  border-radius: var(--corner-radius-extra-large-default);
  box-shadow: var(--shadow-elevated);
  padding: var(--spacing-300);
  display: grid; gap: var(--spacing-100); align-content: start;
  min-width: 0;
}
.bao-flow__node h4 { margin: 0; font-size: var(--font-size-200); font-weight: var(--extra-bold-font-weight); color: var(--text-heading); display:flex; align-items:center; gap:8px; }
.bao-flow__node p { margin: 0; font-size: var(--font-size-75); color: var(--text-subdued); line-height: 1.5; }
.bao-flow__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bao-flow__mid { display: grid; gap: var(--spacing-200); align-content: center; }
.bao-flow__arrow { display: grid; place-items: center; color: var(--text-accent); }
.bao-flow__arrow .s2-icon { --s2-icon-size: 26px; }
.bao-flow__cloud {
  display:flex; align-items:center; gap: 8px; justify-content:center;
  font-size: 12px; color: var(--text-subdued);
  padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: var(--surface-base);
}
.bao-flow__cloud .s2-icon { --s2-icon-size: 16px; }

/* ============================================================================
   AI flows grid
   ========================================================================== */
.bao-aigrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-300);
  margin-top: clamp(28px, 4vw, 48px);
}
.bao-aicard {
  padding: var(--spacing-300);
  border-radius: var(--corner-radius-extra-large-default);
  background: var(--surface-layer-2);
  border: var(--border-width-100) solid var(--border-default);
  display: grid; gap: var(--spacing-100); align-content: start;
  transition: border-color 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}
.bao-aicard:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: color-mix(in oklab, var(--red-500) 45%, var(--border-default)); }
.bao-aicard__top { display: flex; align-items: center; gap: 10px; }
.bao-aicard__top .s2-icon { --s2-icon-size: 20px; color: var(--text-accent); }
.bao-aicard h4 { margin: 0; font-size: var(--font-size-200); font-weight: var(--extra-bold-font-weight); color: var(--text-heading); }
.bao-aicard p { margin: 0; font-size: var(--font-size-100); color: var(--text-subdued); line-height: 1.5; }
.bao-steps { display:flex; align-items:center; gap:6px; margin-top: 6px; font-size: 11px; color: var(--text-subdued); font-weight: 600; }
.bao-steps b { color: var(--text-accent); }
.bao-steps .s2-icon { --s2-icon-size: 12px; opacity: 0.6; }

/* ============================================================================
   Import / Export
   ========================================================================== */
.bao-io { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-400); margin-top: clamp(24px,4vw,40px); }
.bao-io__card {
  padding: var(--spacing-400);
  border-radius: var(--corner-radius-extra-large-default);
  border: var(--border-width-100) solid var(--border-default);
  background: var(--surface-layer-2);
  display: grid; gap: var(--spacing-300); align-content: start;
}
.bao-io__card h3 { margin: 0; display:flex; align-items:center; gap: 10px; font-size: var(--font-size-300); font-weight: var(--extra-bold-font-weight); color: var(--text-heading); }
.bao-io__card h3 .s2-icon { --s2-icon-size: 22px; color: var(--text-accent); }
.bao-io__items { display: grid; gap: var(--spacing-200); }
.bao-io__item { display:flex; gap: 10px; align-items:flex-start; font-size: var(--font-size-200); color: var(--text-body); }
.bao-io__item b { color: var(--text-heading); font-weight: var(--bold-font-weight); }
.bao-io__item .s2-icon { --s2-icon-size: 18px; color: var(--text-subdued); margin-top: 2px; flex-shrink: 0; }
.bao-io__formats { display:flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================================
   CLI / terminal
   ========================================================================== */
.bao-cli { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.bao-term {
  border-radius: var(--corner-radius-extra-large-default);
  background: #14151c;
  border: 1px solid #262838;
  box-shadow: var(--shadow-emphasized), 0 40px 80px -40px rgba(0,0,0,0.6);
  overflow: hidden;
  font-family: var(--font-family-code);
}
.spectrum-dark .bao-term { background: #0c0d12; }
.bao-term__bar { height: 40px; display:flex; align-items:center; gap: 10px; padding-inline: 14px; background: #1c1e28; border-bottom: 1px solid #262838; }
.bao-term__bar .bao-lights i { width: 11px; height: 11px; }
.bao-term__bar span { font-size: 11px; color: #8b8fa3; font-family: var(--font-family-code); }
.bao-term__body { padding: 18px 20px; font-size: 13px; line-height: 1.85; color: #d7dae6; }
.bao-term__body .pr { color: #ff8f7e; }               /* prompt $ — coral */
.bao-term__body .cmd { color: #fff; }
.bao-term__body .flag { color: #ffd36b; }
.bao-term__body .out { color: #8b8fa3; }
.bao-term__body .ok { color: #6ee7a8; }
.bao-term__body .arrow { color: #7c9cff; }

/* ============================================================================
   Download CTA band
   ========================================================================== */
.bao-download {
  position: relative;
  overflow: hidden;
  background: var(--bao-hero-gradient);
  color: #fff;
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(40px, 6vw, 80px) var(--bao-gutter);
  text-align: center;
  display: grid; justify-items: center; gap: var(--spacing-300);
  isolation: isolate;
}
.bao-download__icon { width: clamp(88px, 12vw, 132px); height:auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,0.28)); }
.bao-download h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: var(--black-font-weight); letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-wrap: balance; }
.bao-download p { color: rgba(255,255,255,0.92); font-size: clamp(1.05rem,1.6vw,1.3rem); max-width: 620px; margin: 0; }
.bao-download__cta { display:flex; flex-wrap:wrap; gap: var(--spacing-200); justify-content:center; margin-top: 6px; }
.bao-download__req { display:flex; flex-wrap:wrap; gap: 6px 18px; justify-content:center; color: rgba(255,255,255,0.9); font-size: 13px; margin-top: 4px; }
.bao-download__req span { display:inline-flex; align-items:center; gap:6px; }
.bao-download__req .s2-icon { --s2-icon-size: 15px; }
.bao-download .bao-sparkle { color: rgba(255,255,255,0.9); }

/* ============================================================================
   Footer
   ========================================================================== */
.bao-footer { border-top: var(--border-width-100) solid var(--border-default); padding-block: clamp(48px, 6vw, 72px) var(--spacing-500); }
.bao-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--spacing-500); }
.bao-footer__brand { display: grid; gap: var(--spacing-200); align-content: start; max-width: 300px; }
.bao-footer__brand .bao-brand { margin: 0; }
.bao-footer__brand p { margin: 0; color: var(--text-subdued); font-size: var(--font-size-100); line-height: 1.55; }
.bao-fcol { display: grid; gap: var(--spacing-200); align-content: start; }
.bao-fcol h5 { margin: 0 0 2px; font-size: var(--font-size-75); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subdued); font-weight: var(--bold-font-weight); }
.bao-fcol a { color: var(--text-body); text-decoration: none; font-size: var(--font-size-100); }
.bao-fcol a:hover { color: var(--text-accent); }
.bao-footer__bottom {
  display:flex; flex-wrap: wrap; gap: var(--spacing-200); align-items:center; justify-content: space-between;
  margin-top: clamp(32px,5vw,56px); padding-top: var(--spacing-400);
  border-top: var(--border-width-100) solid var(--border-default);
  color: var(--text-subdued); font-size: var(--font-size-75);
}
.bao-footer__bottom .dot { width:3px;height:3px;border-radius:99px;background:currentColor;opacity:.5;display:inline-block;margin-inline:6px; }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .bao-hero__grid { grid-template-columns: 1fr; }
  .bao-hero__copy { max-width: 640px; }
  .bao-hero__art { max-width: 640px; }
  .bao-feature, .bao-feature--flip { grid-template-columns: 1fr; }
  .bao-feature--flip .bao-feature__art { order: 0; }
  .bao-cli { grid-template-columns: 1fr; }
  .bao-footer__top { grid-template-columns: 1fr 1fr; }
  .bao-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 760px) {
  .bao-navlinks { display: none; }
  .bao-pillars { grid-template-columns: 1fr; gap: var(--spacing-500); }
  .bao-aigrid { grid-template-columns: 1fr; }
  .bao-io { grid-template-columns: 1fr; }
  .bao-flow { grid-template-columns: 1fr; }
  .bao-flow__arrow { transform: rotate(90deg); }
  .bao-tr__cols { grid-template-columns: 1fr; }
  .bao-tr__col + .bao-tr__col { border-left: 0; border-top: 1px solid var(--border-default); }
  .bao-editor__main { grid-template-columns: 1fr; }
  .bao-tpanel { display: none; }
  .bao-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .bao-footer__top { grid-template-columns: 1fr; }
  .bao-hero__appicon { display: none; }
}