/* Baleen.
   The page runs on the shared white homepage shell
   (body.preview-home.white-product-preview + home-redesign-20260603.css +
   home-white-preview.css): header, hero frame, 1200px containers, section
   rhythm, the .product-spec-grid / .spec-block specification layout,
   typography tokens and footer all come from those files. Only the
   Baleen-specific pieces live here. */

/* Baleen pins the two colour tokens it reads, so the page renders identically
   whether the shared white stylesheet in production is the older or the newer
   revision. */
body.preview-home.baleen-page {
  --copy: #3a3a3a;
  --subtle: #666;
}

/* The hero CTA pair shares one size; only the colour and the label differ.
   Scoped to Baleen so the site homepage keeps its own button metrics. */
body.preview-home.baleen-page .preview-hero-actions .preview-primary-cta,
body.preview-home.baleen-page .preview-hero-actions .preview-secondary-cta {
  flex: 0 0 auto;
  width: clamp(220px, 20vw, 272px);
  padding-left: 14px;
  padding-right: 14px;
  text-align: center;
  white-space: normal;
}

@media (max-width: 760px) {
  body.preview-home.baleen-page .preview-hero-actions .preview-primary-cta,
  body.preview-home.baleen-page .preview-hero-actions .preview-secondary-cta { width: min(100%, 320px); }
}

/* Availability block: platforms, price, status. Used in the hero and in the
   download section, so it never reads as a clickable download button. */
body.preview-home.baleen-page .baleen-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 26px 0 0;
}

body.preview-home.baleen-page .baleen-status--center { align-items: center; }
body.preview-home.baleen-page .baleen-download .baleen-status { align-items: flex-start; margin-top: 40px; }

body.preview-home.baleen-page .baleen-status span {
  color: #8a8a8a !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

body.preview-home.baleen-page .baleen-status .baleen-status__price { color: var(--ink) !important; }

/* Hero CTA pair, same shapes as the homepage hero: the store listing and the
   free one-month trial. Both stay non-clickable (no href) until the App Store
   listing is approved and the installer exists; the labels say so. */
body.preview-home.baleen-page .baleen-cta-pending {
  pointer-events: none;
  cursor: default;
  user-select: none;
}

/* Hero image slot: the screenshot sits in the homepage's flat, 1px-bordered
   frame. If the image is ever removed, the slot falls back to a reserved
   placeholder box on its own. */
body.preview-home.baleen-page .baleen-media-slot {
  position: relative;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.preview-home.baleen-page .baleen-media-slot:empty {
  aspect-ratio: 16 / 10;
  background: #f7f7f7 !important;
}

body.preview-home.baleen-page .baleen-media-slot:empty::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9a9a9a;
  font-size: 13px;
  letter-spacing: .08em;
}

body.preview-home.baleen-page .baleen-media-slot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Section headings. The shared .core-feature-intro block is written for the
   homepage's h3 module titles, so Baleen's h2 section titles take the
   homepage's h2 scale here. */
body.preview-home.baleen-page .baleen-intro h2 {
  margin: 0;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
}

/* Specifications: same .product-spec-grid / .spec-block components as the
   homepage, with the product name only in the first column. */
body.preview-home.baleen-page .baleen-specs .product-spec-grid { margin-top: 46px; }
body.preview-home.baleen-page .baleen-specs .product-spec-column + .product-spec-column { padding-top: 0; }

@media (max-width: 760px) {
  body.preview-home.baleen-page .baleen-media-slot:empty { aspect-ratio: 4 / 3; }
}