.budget-page .detail-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  overflow-wrap: anywhere;
}
.budget-page .budget-art { padding: clamp(16px, 3vw, 34px); }
.budget-page .budget-art img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.budget-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.budget-actions > span { color: #b9c9d4; font-size: .875rem; }
.budget-demo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 270px); gap: clamp(24px, 5vw, 64px);
  align-items: center; padding: clamp(24px, 5vw, 55px); margin: 30px 0 44px;
  border: 1px solid var(--line); background: #101c27; scroll-margin-top: 100px;
}
.budget-demo h2 { font-size: clamp(1.6rem, 3.5vw, 2.7rem); margin: 0 0 .55em; }
.budget-demo video { display: block; width: 100%; height: auto; max-height: 480px; aspect-ratio: 9 / 16; border-radius: 12px; background: #090f17; }
@media (max-width: 760px) {
  .budget-page .detail-hero, .budget-demo { grid-template-columns: minmax(0, 1fr); }
  .budget-demo video { max-width: 270px; justify-self: center; }
}

.budget-guide { margin: clamp(38px, 6vw, 80px) 0; scroll-margin-top: 100px; }
.budget-guide > header { margin-bottom: 26px; }
.budget-guide > header h2 { font: 600 clamp(1.75rem, 4.2vw, 3rem)/1.12 var(--heading); margin: 0 0 9px; }
.budget-guide > header p { margin: 0; color: #b9c9d4; }
.budget-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(15px, 2.2vw, 26px); }
.budget-guide-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: #101c27; min-width: 0; }
.budget-guide-copy { padding: clamp(18px, 3vw, 30px); }
.budget-guide-copy h3 { font: 600 clamp(1.25rem, 2.4vw, 1.7rem)/1.2 var(--heading); margin: 0 0 10px; }
.budget-guide-copy p { margin: 0; color: #bac9d5; line-height: 1.55; }
.budget-shot { display: grid; place-items: center; margin: auto clamp(12px, 2vw, 22px) clamp(12px, 2vw, 22px); padding: 12px; background: #080f19; border: 1px solid #ffffff18; border-radius: 10px; }
.budget-shot img { display: block; width: 100%; height: auto; border-radius: 5px; }
.budget-shot-phone img { width: auto; max-width: 100%; max-height: clamp(300px, 28vw, 390px); }
.budget-shot:focus-visible { outline: 2px solid #a8f0d7; outline-offset: 3px; }
.budget-page .budget-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) {
  .budget-guide-grid, .budget-page .budget-more { grid-template-columns: minmax(0, 1fr); }
  .budget-shot { padding: 7px; }
}
