.invoice-main { padding-block: 28px 48px; }
.invoice-workflows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.invoice-assistant { margin-block-end: 22px; }
.invoice-main .panel { padding: clamp(20px, 3vw, 34px); }
.invoice-main .panel h2 { margin-block: 0 12px; }
.invoice-main .panel p, .invoice-main ol { line-height: 1.75; }
.invoice-main ol { padding-inline-start: 1.4em; }
.invoice-hours { margin-block-start: 22px; }
.invoice-main .panel a { text-decoration: underline; text-underline-offset: .2em; }
.invoice-main details { border-block-start: 1px solid #294265; padding-block: 12px; }
.invoice-main summary { cursor: pointer; font-weight: 600; }
.invoice-screen { margin: 16px 0; max-width: 650px; }
.invoice-screen img { display: block; width: 100%; height: auto; border-radius: 12px; }
.invoice-screen figcaption { margin-block-start: 8px; font-size: .9rem; }
.invoice-skip { position: absolute; inset-inline-start: 16px; inset-block-start: 8px; z-index: 10; }
.invoice-skip:not(:focus) { clip-path: inset(50%); }
.invoicing-landing :is(#features,#ezri,#ezri-guide,#workflow,#allocation,#expenses,#faq) { scroll-margin-top: 70px; }
@media (max-width: 700px) {
  .invoice-workflows { grid-template-columns: minmax(0, 1fr); }
}
.invoicing-landing .hero {
  background-color: #030c1b;
  background-image:
    linear-gradient(90deg, rgba(3, 12, 27, .20), rgba(3, 12, 27, .38) 59%, rgba(3, 12, 27, .12)),
    linear-gradient(0deg, #030c1b, transparent 36%),
    url('tax-workspace.png');
  background-position: center, center, center 52%;
  background-size: cover;
}

@media (max-width: 800px) {
  .invoicing-landing .hero {
    background-image:
      linear-gradient(180deg, rgba(3, 12, 27, .65), rgba(3, 12, 27, .34) 52%, #030c1b),
      url('tax-workspace.png');
    background-position: center, 72% center;
  }
}