/* Approved V2 audit deltas reconciled with the qualified responsive successor.
   Geometry and readable type belong to responsive.css (16px prose / 14px captions).
   Do not reintroduce the export's fixed hero heights, 12px captions or fit-only viewer.
   Exact plane registration/timeline belong to byte-identical hero-motion.css/js. */
.hero .status { color: #365a43; }
.microcaption, .microcaption .detail, .app-meta { color: #526647; }
.work-head .work-title { font-size: 17px; line-height: 1.6; margin: 0; letter-spacing: -.35px; font-weight: 600; }
.receipt strong { font-size: 15px; font-weight: 700; color: #173d32; }
.receipt small { color: #526647; }
.receipt { border-color: #b7c8a8; }
.permission-row.budget strong { font-size: 20px; }
.blocked p { color: #526647; }
/* Keep qualified 14px caption sizes and contrast repairs from responsive.css. */
.expand-hint {
  position: relative; right: auto; bottom: auto;
  width: max-content; margin: 8px 10px 10px auto;
  opacity: 1; transform: none;
}
@media (max-width: 640px) {
  .work-head .work-title { font-size: 16px; }
  .receipt strong { font-size: 14px; }
  .microcaption { margin-top: 17px; }
}

/* Hero-only product/demo pair; retain primary type, padding and choreography. */
.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-top: 28px;
}
.hero .hero-actions .main-cta { margin-top: 0; }
.hero .secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 16px 21px;
  border: 1px solid var(--forest);
  border-radius: 7px;
  background: var(--ivory);
  color: var(--forest);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s;
}
.hero .secondary-cta:hover { background: var(--lichen); }
.hero .hero-actions > a:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 4px;
}
@media (max-width: 640px) {
  .hero .hero-actions { margin-top: 25px; }
  .hero .secondary-cta { padding: 15px 20px; }
}

/* Andrea's bounded landing finish. Keep the accepted copy and hero motion. */
.hero .eyebrow {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 6px 12px;
  gap: 8px;
  border: 1px solid #365a432b;
  border-radius: 999px;
  background: #bfe5f02e;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
}
.hero .eyebrow::before { flex-shrink: 0; width: 3px; height: 3px; }
/* The 1px border plus 7px padding gives an 8px edge inset:
   16px outer corner = 8px inset + 8px control corner. */
.hero .nav {
  height: auto;
  padding: 7px 7px 7px 24px;
  border-radius: 16px;
}
.hero .nav-cta { border-radius: 8px; }
@media (max-width: 640px) {
  .hero .nav { padding-left: 16px; }
  .hero .menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }
}


/* Latest CTA reconciliation: secondary left, primary right in native DOM order.
   Retain the incumbent outlined secondary, arrow, wrapper and entrance owner. */
.hero .hero-actions .main-cta {
  border-radius: 16px;
  box-shadow: none;
}
/* Normal-flow stacking avoids cramped controls without changing type or touch size. */
@media (max-width: 440px) {
  .hero .hero-actions { flex-direction: column; align-items: center; }
}

/* Four semantic menu items remain fully reachable in short mobile landscapes. */
@media (max-width: 640px) and (max-height: 500px) {
  .hero .links.is-open { gap: 0; }
}