.interior-hero--invoices .interior-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
}

.invoice-hero-card {
  color: var(--gyg-blue);
  background: #fff;
  border: 1px solid #dce4ed;
  border-radius: 9px;
  overflow: hidden;
}

.invoice-hero-toolbar,
.invoice-hero-parties,
.invoice-hero-line,
.invoice-hero-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.invoice-hero-toolbar {
  padding: 16px 18px;
  color: #fff;
  background: #1a2a4a;
  font-size: 13px;
}

.invoice-hero-toolbar span { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.invoice-hero-toolbar i { color: var(--gyg-yellow); }
.invoice-hero-parties { padding: 20px 18px; border-bottom: 1px solid #e4e8ee; }
.invoice-hero-parties span { min-width: 0; }
.invoice-hero-parties span:last-child { text-align: right; }
.invoice-hero-parties small,
.invoice-hero-parties b { display: block; }
.invoice-hero-parties small { margin-bottom: 4px; color: #738196; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invoice-hero-parties b { font-size: 13px; }
.invoice-hero-line { padding: 20px 18px; }
.invoice-hero-line span { min-width: 0; }
.invoice-hero-line b,
.invoice-hero-line small { display: block; }
.invoice-hero-line b { font-size: 13px; }
.invoice-hero-line small { margin-top: 4px; color: #758398; font-size: 12px; }
.invoice-hero-line > strong { flex: 0 0 auto; font-size: 14px; }
.invoice-hero-total { padding: 17px 18px; background: #f2f5f8; border-top: 1px solid #e1e6ec; }
.invoice-hero-total span { color: #53647a; font-size: 12px; font-weight: 700; }
.invoice-hero-total strong { font-size: 24px; }
.invoice-hero-status { padding: 12px 18px; color: #087354; background: #eaf8f2; border-top: 1px solid #cce9dd; font-size: 13px; font-weight: 800; }
.invoice-hero-status i { margin-right: 6px; }

.hero-receipt {
  width: min(100%, 430px);
  margin-inline: auto;
  padding: 28px 30px 0;
  color: var(--gyg-blue);
  background: #fff;
  border: 1px solid #d6dee7;
  border-top: 4px solid var(--gyg-orange);
  border-radius: 10px;
  font-family: "Courier New", monospace;
}

.hero-invoice-stack {
  position: relative;
  width: min(100%, 470px);
  min-height: 500px;
  margin-inline: auto;
}

.hero-receipt--invoice {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 35px), 430px);
  margin: 38px 0 0 auto;
  border-top: 1px solid #d6dee7;
}

.hero-receipt-back {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 0;
  width: 300px;
  min-height: 245px;
  padding: 24px 23px;
  color: var(--gyg-blue);
  background: #f7f9fb;
  border: 1px solid #cbd5e0;
  font: 11px/1.5 "Courier New", monospace;
  transform: rotate(-4deg);
}

.hero-receipt-back header,
.hero-receipt-back p,
.hero-receipt-back footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.hero-receipt-back header {
  padding-bottom: 13px;
  border-bottom: 1px dashed #aebac8;
  font-weight: 800;
}

.hero-receipt-back p {
  margin: 16px 0 0;
}

.hero-receipt-back p b {
  white-space: nowrap;
}

.hero-receipt-back footer {
  align-items: baseline;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #aebac8;
  font-weight: 900;
}

.hero-receipt-back footer strong {
  font-size: 18px;
}
.hero-receipt > header,
.hero-receipt-lines span,
.hero-receipt dl div,
.hero-receipt > footer { display: flex; justify-content: space-between; gap: 18px; }
.hero-receipt > header { padding-bottom: 16px; border-bottom: 2px dashed #cbd5e0; font-size: 13px; font-weight: 800; }
.hero-receipt-client { padding: 19px 0 13px; }
.hero-receipt-client small,
.hero-receipt-client b { display: block; }
.hero-receipt-client small { color: #738397; font: 800 10px/1 var(--font); letter-spacing: .08em; }
.hero-receipt-client b { margin-top: 5px; font: 800 15px/1.3 var(--font); }
.hero-receipt-lines { padding: 10px 0 14px; border-bottom: 1px dashed #cbd5e0; }
.hero-receipt-lines span { padding: 6px 0; font-size: 12px; }
.hero-receipt-lines b { flex: 0 0 auto; }
.hero-receipt dl { margin: 0; padding: 15px 0; border-bottom: 1px dashed #cbd5e0; }
.hero-receipt dl div + div { margin-top: 7px; }
.hero-receipt dd { margin: 0; font-weight: 800; }
.hero-receipt > footer { align-items: center; padding: 18px 0; font: 900 14px/1 var(--font); }
.hero-receipt > footer strong { font-size: 29px; }
.hero-receipt > p { margin: 0; padding: 14px 0; color: #087354; border-top: 1px dashed #cbd5e0; font: 750 12px/1.4 var(--font); }
.hero-receipt > p i { margin-right: 6px; }
.hero-receipt > aside { display: flex; align-items: center; gap: 9px; margin: 0 -12px -19px; padding: 12px 16px; color: #fff; background: #0c1c3f; border-radius: 7px; font: 800 12px/1.3 var(--font); }
.hero-receipt > aside i { width: 9px; height: 9px; flex: 0 0 9px; background: var(--gyg-orange); border-radius: 50%; }

.invoice-builder {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr);
  border: 1px solid #d8e0e8;
  border-top: 4px solid var(--gyg-orange);
  border-radius: 12px;
  overflow: hidden;
}

.invoice-builder-form {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 19px;
  padding: 38px;
  background: #f6f8fa;
  border-right: 1px solid #d8e0e8;
}

.invoice-builder-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 3px; }
.invoice-builder-heading h3 { margin: 0; }
.invoice-builder-heading p { margin: 4px 0 0; font-size: 14px; }
.invoice-step { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--gyg-blue); font-size: 13px; font-weight: 900; }

.invoice-builder-form label { display: grid; gap: 7px; color: var(--gyg-blue); font-size: 14px; font-weight: 800; }
.invoice-builder-form input,
.invoice-builder-form select {
  width: 100%;
  min-height: 50px;
  padding: 12px 13px;
  color: var(--gyg-text);
  background: #fff;
  border: 1px solid #cbd4df;
  border-radius: 7px;
  font-size: 16px;
}

.invoice-builder-form input:focus,
.invoice-builder-form select:focus { border-color: #0b6d91; outline: 3px solid rgba(11, 109, 145, .15); }
.invoice-builder-fields { display: grid; grid-template-columns: minmax(0, 1fr) 112px 138px; gap: 14px; }
.input-suffix { position: relative; display: block; }
.input-suffix input { padding-right: 40px; }
.input-suffix b { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: #647489; }
.invoice-builder-action { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 3px; padding: 13px 17px; color: #fff; background: var(--gyg-orange); border-radius: 7px; font-size: 14px; font-weight: 850; }
.invoice-builder-action:hover { background: var(--gyg-orange-dark); }

.invoice-builder-action { width: 100%; border: 0; cursor: pointer; }

.invoice-builder-section .interior-section-head h2 {
  max-width: none;
  white-space: nowrap;
}

.invoice-preview {
  min-width: 0;
  align-self: stretch;
  padding: 38px 42px;
  color: var(--gyg-text);
  background: #fff;
}

.invoice-professional-preview {
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: #e9eef3;
}

.invoice-professional-preview .invoice-template {
  flex: 0 0 auto;
  zoom: .57;
  box-shadow: 0 12px 30px rgba(12, 35, 70, .08);
}

.invoice-preview-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 3px solid var(--gyg-blue); }
.invoice-preview-top span { color: var(--gyg-blue); font-size: 25px; font-weight: 900; letter-spacing: .08em; }
.invoice-preview-top b { padding: 7px 10px; color: #fff; background: var(--gyg-blue); border-radius: 5px; font-size: 12px; }
.invoice-preview-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid #dfe5ec; }
.invoice-preview-meta small,
.invoice-preview-meta b { display: block; }
.invoice-preview-meta small { margin-bottom: 5px; color: #708095; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.invoice-preview-meta b { color: var(--gyg-blue); font-size: 13px; }
.invoice-preview-table { margin-top: 24px; }
.invoice-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 20px; padding: 14px 12px; border-bottom: 1px solid #e3e8ee; font-size: 13px; }
.invoice-preview-row > :last-child { text-align: right; }
.invoice-preview-row.is-head { color: #fff; background: var(--gyg-blue); border-bottom: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.invoice-preview-totals { width: min(100%, 290px); display: grid; gap: 8px; margin: 22px 0 0 auto; }
.invoice-preview-totals > span { display: flex; justify-content: space-between; gap: 20px; color: #607086; font-size: 13px; }
.invoice-preview-totals .is-total { margin-top: 5px; padding-top: 12px; color: var(--gyg-blue); border-top: 2px solid var(--gyg-blue); font-size: 15px; font-weight: 850; }
.invoice-preview-totals .is-total strong { color: var(--gyg-orange); font-size: 20px; }
.invoice-preview-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 28px; color: #64758a; font-size: 13px; font-weight: 750; }
.invoice-preview-note i { color: #0c779d; }

.invoice-prepared { margin-top: 42px; overflow: hidden; border: 1px solid #cbd6e1; border-radius: 12px; }
.invoice-prepared[hidden] { display: none; }
.invoice-prepared-head { display: flex; justify-content: space-between; gap: 36px; align-items: center; padding: 26px 30px; background: #fff; border-bottom: 1px solid #d7e0e8; }
.invoice-prepared-head > div { max-width: 760px; }
.invoice-prepared-head h3 { margin: 5px 0 0; font-size: 24px; }
.invoice-prepared-head p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.invoice-prepared-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.invoice-modify-link { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; color: #fff; background: var(--gyg-orange); border-radius: 7px; font-size: 14px; font-weight: 850; }
.invoice-modify-link:hover { color: #fff; background: var(--gyg-orange-dark); }
.invoice-modify-link:focus-visible { outline: 3px solid rgba(255,102,55,.28); outline-offset: 3px; }
.invoice-download-form { flex: 0 0 auto; }
.invoice-download-form button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; color: #fff; background: #087354; border-radius: 7px; font-size: 14px; font-weight: 850; white-space: nowrap; }
.invoice-download-form button:hover { background: #075f46; }
.invoice-prepared-stage { display: grid; justify-content: center; padding: 38px; background: #e9eef3; }

.invoice-product-grid { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); gap: 66px; align-items: center; }
.invoice-product-copy h2 { margin: 0; }
.invoice-product-copy > p { margin: 22px 0 0; font-size: 16px; line-height: 1.75; }
.invoice-benefits { display: grid; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; }
.invoice-benefits li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.invoice-benefits li > i { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gyg-orange); background: #fff0eb; border-radius: 8px; }
.invoice-benefits b,
.invoice-benefits small { display: block; }
.invoice-benefits b { color: var(--gyg-blue); font-size: 15px; }
.invoice-benefits small { margin-top: 4px; color: var(--gyg-muted); font-size: 14px; line-height: 1.55; }
.invoice-product-shot { margin: 0; overflow: hidden; background: #fff; border: 1px solid #ced8e3; border-radius: 12px; }
.invoice-product-shot-bar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 15px; color: #fff; background: var(--gyg-blue); font-size: 12px; }
.invoice-product-shot-bar span { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.invoice-product-shot-bar i { color: var(--gyg-yellow); }
.invoice-product-shot img { width: 100%; height: auto; }
.invoice-product-shot figcaption { padding: 12px 15px; color: #65758a; border-top: 1px solid #e2e7ed; font-size: 13px; line-height: 1.5; }

.invoice-status { border: 1px solid #d4dce5; border-radius: 12px; overflow: hidden; }
.invoice-status-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #15365f; }
.invoice-status-tabs button { position: relative; min-height: 112px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px 12px; color: #dbe6f2; border-right: 1px solid #45617f; font-size: 13px; font-weight: 800; }
.invoice-status-tabs button:last-child { border-right: 0; }
.invoice-status-tabs button > span { position: absolute; top: 11px; left: 13px; color: #8fb0d5; font-size: 13px; font-weight: 900; }
.invoice-status-tabs button > i { color: var(--gyg-yellow); font-size: 20px; }
.invoice-status-tabs button:hover { background: #1b426f; }
.invoice-status-tabs button.is-active { color: #fff; background: var(--gyg-orange); }
.invoice-status-tabs button.is-active > span,
.invoice-status-tabs button.is-active > i { color: #fff; }
.invoice-status-panel { min-height: 170px; display: grid; grid-template-columns: minmax(180px, .6fr) 40px minmax(180px, .6fr) minmax(260px, 1fr); gap: 24px; align-items: center; padding: 32px 38px; }
.invoice-status-panel > div small,
.invoice-status-panel > div strong { display: block; }
.invoice-status-panel > div small { margin-bottom: 7px; color: #718197; font-size: 12px; font-weight: 850; letter-spacing: .07em; }
.invoice-status-panel > div strong { color: var(--gyg-blue); font-size: 24px; }
.invoice-status-panel > i { color: var(--gyg-orange); font-size: 22px; }
.invoice-status-panel > p { margin: 0; padding-left: 28px; border-left: 1px solid #dbe2e9; font-size: 15px; line-height: 1.7; }

@media (max-width: 1024px) {
  .interior-hero--invoices .interior-hero-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 42px; }
  .invoice-builder { grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr); }
  .invoice-builder-form,
  .invoice-preview { padding: 30px; }
  .invoice-professional-preview .invoice-template { zoom: .48; }
  .invoice-product-grid { gap: 38px; }
  .invoice-status-panel { grid-template-columns: 1fr 30px 1fr; }
  .invoice-status-panel > p { grid-column: 1 / -1; padding: 20px 0 0; border-top: 1px solid #dbe2e9; border-left: 0; }
}

@media (max-width: 820px) {
  .interior-hero--invoices .interior-hero-grid,
  .invoice-builder,
  .invoice-product-grid { grid-template-columns: 1fr; }
  .invoice-builder-form { border-right: 0; border-bottom: 1px solid #d8e0e8; }
  .invoice-builder-section .interior-section-head h2 { white-space: normal; }
  .invoice-professional-preview .invoice-template { zoom: .7; }
  .invoice-product-copy { max-width: 680px; }
  .invoice-status-tabs button { min-height: 100px; }
  .invoice-prepared-head { align-items: flex-start; }
  .invoice-prepared-stage .invoice-template { zoom: .79; }
}

@media (max-width: 560px) {
  .invoice-hero-line b { max-width: 190px; }
  .invoice-hero-total strong { font-size: 21px; }
  .invoice-builder-form,
  .invoice-preview { padding: 24px 18px; }
  .invoice-professional-preview { padding: 12px; }
  .invoice-professional-preview .invoice-template { zoom: .42; }
  .invoice-builder-fields { grid-template-columns: 1fr; }
  .invoice-preview-top span { font-size: 20px; }
  .invoice-preview-meta { grid-template-columns: 1fr; gap: 16px; }
  .invoice-preview-row { grid-template-columns: minmax(0, 1fr) 92px; gap: 12px; padding-inline: 9px; }
  .invoice-preview-totals { width: 100%; }
  .invoice-product-grid { gap: 32px; }
  .invoice-product-shot-bar b { display: none; }
  .invoice-status-tabs { grid-template-columns: 1fr 1fr; }
  .invoice-status-tabs button:nth-child(2) { border-right: 0; }
  .invoice-status-tabs button:nth-child(-n+2) { border-bottom: 1px solid #45617f; }
  .invoice-status-panel { grid-template-columns: 1fr; gap: 20px; padding: 26px 20px; }
  .invoice-status-panel > i { transform: rotate(90deg); }
  .invoice-status-panel > p { grid-column: auto; }
  .hero-receipt { padding: 23px 20px 0; }
  .hero-invoice-stack { min-height: 480px; }
  .hero-receipt-back { width: 250px; padding: 20px 17px; font-size: 9px; }
  .hero-receipt--invoice { width: calc(100% - 25px); margin-top: 34px; }
  .hero-receipt > footer strong { font-size: 25px; }
  .invoice-prepared-head { display: grid; gap: 20px; padding: 23px 18px; }
  .invoice-download-form,
  .invoice-download-form button,
  .invoice-prepared-actions,
  .invoice-modify-link { width: 100%; }
  .invoice-prepared-stage { display: block; padding: 12px; overflow: hidden; }
  .invoice-prepared-stage .invoice-template { zoom: .445; }
}