/* Existing public landing: readable controls and non-overlapping original artwork. */
.reveal, .reveal.is-waiting { opacity: 1; transform: none; transition: none; }
.stage { min-width: 0; }
.hero-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-right: 0;
  padding-bottom: 0;
}
.hero-ascle {
  position: static;
  justify-self: end;
  width: 200px;
  height: auto;
  aspect-ratio: auto;
}
.capture-detail { margin-top: 12px; min-width: 0; width: 100%; }
.capture-detail summary {
  cursor: pointer;
  min-height: 48px;
  padding: 12px 0;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.capture-detail summary:focus-visible, .capture-expanded:focus-visible {
  outline: 3px solid #226cc0;
  outline-offset: 4px;
}
.capture-expanded {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.capture-expanded img {
  width: var(--capture-width, 1000px);
  max-width: none;
  height: auto;
  object-fit: contain;
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .wrap { width: calc(100% - 32px); }
  .hero-copy, .feature-copy, .visual, .stage, .route-demo, .rhythm,
  .feature-index > a, .badge-grid > article, .final-inner > div {
    min-width: 0;
  }
  p, .feature-copy > p, .stage p, .rhythm p, .library-row p,
  .tool-cards p, .section-intro > p { font-size: 17px; line-height: 1.65; }
  h2 { font-size: clamp(32px, 8.4vw, 42px); line-height: 1.12; }
  .section { padding-block: 44px; }
  .section-intro { margin-bottom: 24px; }
  .section-intro > p { margin-top: 18px; }
  .eyebrow, .visual-label, .stage-number,
  .route-heading .eyebrow, .guide-preview > .fine {
    font-size: 14px !important;
    letter-spacing: .06em;
    line-height: 1.6;
  }
  .caption, .fine { font-size: 15px !important; line-height: 1.65 !important; }
  .browser figcaption { font-size: 14px; line-height: 1.6; padding: 12px; }
  .browser-bar { font-size: 12px; gap: 10px; padding: 10px; }
  .browser-bar span:last-child { min-width: 0; text-align: right; }
  .hero-note { font-size: 16px; line-height: 1.6; }
  .hero-ascle { width: 160px; height: auto; }
  .hero-product { padding-bottom: 0; gap: 16px; }

  .nav-wrap {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 8px;
    width: calc(100% - 24px);
    min-height: 76px;
  }
  .nav-wrap > .brand, .nav-wrap > .brand img { width: 54px; height: 54px; }
  .menu-toggle {
    justify-self: end;
    margin: 0;
    min-height: 48px;
    padding: 10px;
    font-size: 16px;
  }
  .account-nav { min-width: 0; }
  .account-nav .button { min-height: 48px; padding: 11px 10px; font-size: 16px; }
  .account-nav .button > span { display: none; }
  #public-nav a { min-height: 48px; padding: 12px; font-size: 17px; }
  .button, .hero .button, .text-link {
    min-height: 48px;
    font-size: 17px;
    line-height: 1.45;
  }
  .hero .actions, .feature-copy .actions, .final-inner .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .actions .button { width: 100%; padding: 13px 16px; }

  /* Function names and destinations remain readable native links. */
  .feature-index { grid-template-columns: minmax(0, 1fr); }
  .feature-index a { min-height: 64px; padding: 16px; gap: 16px; font-size: 20px; }
  .feature-index a + a { border-top: 1px solid var(--line); }
  .feature-index span { font-size: 15px; }
  .feature { gap: 24px; }
  .stage { padding: 22px; }
  .stage > img { height: auto; }
  .stage .capture-detail { width: 100%; }
  .stage ul { font-size: 16px; line-height: 1.8; }
  .stage li + li { margin-top: 6px; }
  .stage .text-link { margin-top: 14px; }
  .visual { padding: 16px; }
  .visual-label { margin-bottom: 18px; }
  .mini-steps { flex-wrap: wrap; gap: 12px; font-size: 16px; }
  .question-options { flex-direction: column; gap: 10px; }
  .question-options a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    font-size: 17px;
    line-height: 1.5;
    text-align: left;
  }
  .question-options b { font-size: 30px; text-align: center; }
  .tool-cards > a { padding: 20px; }
  .tool-cards small { display: block; font-size: 14px; line-height: 1.6; letter-spacing: .05em; }
  .tool-icon { margin-left: 10px; }
  .library-row { gap: 14px; }
  .library-row > span { font-size: 15px; }
  .library-row > div { min-width: 0; }
  .guide-preview { padding: 16px; }
  .guide-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guide-tabs button { min-height: 48px; padding: 12px 8px; font-size: 16px; line-height: 1.4; }
  #guide-copy { min-height: 0; padding-top: 24px; }
  #guide-copy p, #guide-copy strong { font-size: 17px; line-height: 1.65; }
  .route-demo, .rhythm { padding: 22px; }
  .route-stats { flex-wrap: wrap; gap: 20px; }
  .route-stats span, .tag { font-size: 14px; line-height: 1.6; }
  .tag { white-space: normal; }
  .badge-grid h3 { font-size: 22px; line-height: 1.2; }
  .badge-grid p, .footer p { font-size: 16px; line-height: 1.65; }
  .footer nav { flex-direction: column; align-items: stretch; gap: 4px; }
  .footer nav a { display: flex; align-items: center; min-height: 48px; font-size: 17px; }
  .footer small { font-size: 14px; line-height: 1.65; }
}
@media (max-width: 430px) {
  .badge-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .badge-grid article { padding: 22px; }
  .badge-grid svg { height: 144px; }
}