.mast { display: flex; align-items: center; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.mast p { font-size: 1rem; font-weight: 700; }
.mast p span { font-weight: 450; }
.mast .guide { margin-left: auto; margin-top: 0; color: var(--mute); font-weight: 500; }
.mark { width: 30px; height: 30px; display: flex; gap: 3px; align-items: flex-end; flex-shrink: 0; }
.mark span { display: block; width: 8px; background: var(--rust); height: 18px; }
.mark span:nth-child(2) { height: 28px; background: var(--ink); }
.mark span:nth-child(3) { height: 23px; background: var(--line); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 72px; align-items: center; padding: 64px 0 60px; }
.hero.home { grid-template-columns: minmax(0, 1fr) 340px; min-height: 550px; }
.hero h1 { max-width: 17ch; }
.hero.home h1 { max-width: 17ch; }
@media (max-width: 900px) {
  .hero { gap: 32px; grid-template-columns: minmax(0, 1fr) 160px; }
  .hero.home { grid-template-columns: minmax(0, 1fr) 260px; }
  .mast .guide { display: none; }
}
@media (max-width: 640px) {
  .mast { padding: 22px 0; gap: 10px; align-items: flex-start; }
  .mast p span { display: block; }
  .hero, .hero.home { display: block; min-height: auto; padding: 38px 0 32px; }
  .hero h1, .hero.home h1 { max-width: 19ch; }
}