:root {
  --navy: #102a43;
  --navy-2: #173f5f;
  --teal: #118c83;
  --teal-dark: #08756d;
  --teal-action: #08756d;
  --teal-action-hover: #065f5a;
  --ink: #1e2936;
  --muted: #5f6f7f;
  --line: #dbe2e8;
  --soft: #f3f6f8;
  --paper: #ffffff;
  --action-button-height: 40px;
  --action-button-width: 132px;
  --action-button-radius: 9px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  margin: 0;
  background: #e8edf1;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button,
a,
input,
textarea {
  outline-color: var(--teal);
}

button {
  cursor: pointer;
}

.app-shell {
  height: 100vh;
  overflow: hidden;
}

.topbar {
  align-items: center;
  background: var(--navy);
  color: white;
  display: flex;
  height: 72px;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand-lockup,
.top-actions,
.preview-toolbar,
.preview-toolbar > div,
.button,
.section-title,
.check-row {
  align-items: center;
  display: flex;
}

.brand-lockup {
  gap: 11px;
}

.brand-mark {
  display: block;
  flex: 0 0 42px;
  height: 42px;
  position: relative;
  width: 42px;
}

.brand-mark::before {
  background: #15998f;
  border-radius: 4px;
  box-shadow: 2px 3px 0 rgba(1, 13, 23, 0.18);
  content: "";
  height: 29px;
  left: 15px;
  position: absolute;
  top: 8px;
  width: 21px;
}

.brand-sheet {
  background: #fff;
  border: 1px solid rgba(16, 42, 67, 0.1);
  border-radius: 4px;
  box-shadow: 2px 3px 0 rgba(1, 13, 23, 0.2);
  display: block;
  height: 31px;
  left: 7px;
  overflow: hidden;
  position: relative;
  top: 5px;
  width: 22px;
}

.brand-sheet::before {
  background: #a9e8e2;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  content: "";
  height: 7px;
  position: absolute;
  right: 0;
  top: 0;
  width: 7px;
}

.brand-sheet::after {
  background: #15998f;
  border-radius: 1px;
  box-shadow: 0 5px 0 rgba(21, 153, 143, 0.74), 0 10px 0 rgba(21, 153, 143, 0.46);
  content: "";
  height: 2px;
  left: 8px;
  position: absolute;
  top: 9px;
  width: 9px;
}

.brand-sheet i {
  background: #0c625d;
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  width: 4px;
}

.brand-sheet .brand-fold-one {
  top: 8px;
}

.brand-sheet .brand-punch {
  top: 15px;
  width: 6px;
}

.brand-sheet .brand-fold-two {
  top: 23px;
}

.brand-lockup strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1;
}

.brand-lockup strong span {
  color: #43d6c9;
}

.top-actions {
  gap: 10px;
}

.top-actions > .button {
  height: 40px;
  min-height: 40px;
}

.top-nav-button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: white;
}

.top-nav-button:hover,
.top-nav-button:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.42);
  outline: none;
}

.top-nav-icon,
.printer-icon {
  background-color: currentColor;
  display: inline-block;
  flex: 0 0 16px;
  height: 16px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  width: 16px;
}

.letters-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M1%203.5A1.5%201.5%200%200%201%202.5%202h2.764c.958%200%201.76.56%202.311%201.184C7.985%203.648%208.48%204%209%204h4.5A1.5%201.5%200%200%201%2015%205.5v.64c.57.265.94.876.856%201.546l-.64%205.124A2.5%202.5%200%200%201%2012.733%2015H3.266a2.5%202.5%200%200%201-2.481-2.19l-.64-5.124A1.5%201.5%200%200%201%201%206.14zM2%206h12v-.5a.5.5%200%200%200-.5-.5H9c-.964%200-1.71-.629-2.174-1.154C6.374%203.334%205.82%203%205.264%203H2.5a.5.5%200%200%200-.5.5zm-.367%201a.5.5%200%200%200-.496.562l.64%205.124A1.5%201.5%200%200%200%203.266%2014h9.468a1.5%201.5%200%200%200%201.489-1.314l.64-5.124A.5.5%200%200%200%2014.367%207z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M1%203.5A1.5%201.5%200%200%201%202.5%202h2.764c.958%200%201.76.56%202.311%201.184C7.985%203.648%208.48%204%209%204h4.5A1.5%201.5%200%200%201%2015%205.5v.64c.57.265.94.876.856%201.546l-.64%205.124A2.5%202.5%200%200%201%2012.733%2015H3.266a2.5%202.5%200%200%201-2.481-2.19l-.64-5.124A1.5%201.5%200%200%201%201%206.14zM2%206h12v-.5a.5.5%200%200%200-.5-.5H9c-.964%200-1.71-.629-2.174-1.154C6.374%203.334%205.82%203%205.264%203H2.5a.5.5%200%200%200-.5.5zm-.367%201a.5.5%200%200%200-.496.562l.64%205.124A1.5%201.5%200%200%200%203.266%2014h9.468a1.5%201.5%200%200%200%201.489-1.314l.64-5.124A.5.5%200%200%200%2014.367%207z%22%2F%3E%3C%2Fsvg%3E");
}

.settings-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M9.405%201.05a1.5%201.5%200%200%200-2.81%200l-.18.472a1.5%201.5%200%200%201-2.061.822l-.462-.207a1.5%201.5%200%200%200-1.987%201.987l.207.462a1.5%201.5%200%200%201-.822%202.061l-.472.18a1.5%201.5%200%200%200%200%202.81l.472.18a1.5%201.5%200%200%201%20.822%202.061l-.207.462a1.5%201.5%200%200%200%201.987%201.987l.462-.207a1.5%201.5%200%200%201%202.061.822l.18.472a1.5%201.5%200%200%200%202.81%200l.18-.472a1.5%201.5%200%200%201%202.061-.822l.462.207a1.5%201.5%200%200%200%201.987-1.987l-.207-.462a1.5%201.5%200%200%201%20.822-2.061l.472-.18a1.5%201.5%200%200%200%200-2.81l-.472-.18a1.5%201.5%200%200%201-.822-2.061l.207-.462a1.5%201.5%200%200%200-1.987-1.987l-.462.207a1.5%201.5%200%200%201-2.061-.822zM8%2010.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M9.405%201.05a1.5%201.5%200%200%200-2.81%200l-.18.472a1.5%201.5%200%200%201-2.061.822l-.462-.207a1.5%201.5%200%200%200-1.987%201.987l.207.462a1.5%201.5%200%200%201-.822%202.061l-.472.18a1.5%201.5%200%200%200%200%202.81l.472.18a1.5%201.5%200%200%201%20.822%202.061l-.207.462a1.5%201.5%200%200%200%201.987%201.987l.462-.207a1.5%201.5%200%200%201%202.061.822l.18.472a1.5%201.5%200%200%200%202.81%200l.18-.472a1.5%201.5%200%200%201%202.061-.822l.462.207a1.5%201.5%200%200%200%201.987-1.987l-.207-.462a1.5%201.5%200%200%201%20.822-2.061l.472-.18a1.5%201.5%200%200%200%200-2.81l-.472-.18a1.5%201.5%200%200%201-.822-2.061l.207-.462a1.5%201.5%200%200%200-1.987-1.987l-.462.207a1.5%201.5%200%200%201-2.061-.822zM8%2010.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205%22%2F%3E%3C%2Fsvg%3E");
}

.address-book-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M5%208a2%202%200%201%200%200-4%202%202%200%200%200%200%204m4-2.5a.5.5%200%200%201%20.5-.5h4a.5.5%200%200%201%200%201h-4a.5.5%200%200%201-.5-.5M9%208a.5.5%200%200%201%20.5-.5h4a.5.5%200%200%201%200%201h-4A.5.5%200%200%201%209%208m1%202.5a.5.5%200%200%201%20.5-.5h3a.5.5%200%200%201%200%201h-3a.5.5%200%200%201-.5-.5%22%2F%3E%3Cpath%20d%3D%22M2%202a2%202%200%200%200-2%202v8a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2zM1%204a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v8a1%201%200%200%201-1%201H8.96q.04-.245.04-.5C9%2010.567%207.21%209%205%209c-2.086%200-3.8%201.398-3.984%203.181A1%201%200%200%201%201%2012z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M5%208a2%202%200%201%200%200-4%202%202%200%200%200%200%204m4-2.5a.5.5%200%200%201%20.5-.5h4a.5.5%200%200%201%200%201h-4a.5.5%200%200%201-.5-.5M9%208a.5.5%200%200%201%20.5-.5h4a.5.5%200%200%201%200%201h-4A.5.5%200%200%201%209%208m1%202.5a.5.5%200%200%201%20.5-.5h3a.5.5%200%200%201%200%201h-3a.5.5%200%200%201-.5-.5%22%2F%3E%3Cpath%20d%3D%22M2%202a2%202%200%200%200-2%202v8a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2zM1%204a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v8a1%201%200%200%201-1%201H8.96q.04-.245.04-.5C9%2010.567%207.21%209%205%209c-2.086%200-3.8%201.398-3.984%203.181A1%201%200%200%201%201%2012z%22%2F%3E%3C%2Fsvg%3E");
}

.button {
  border: 0;
  border-radius: var(--action-button-radius);
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  height: var(--action-button-height);
  justify-content: center;
  min-height: var(--action-button-height);
  padding: 0 12px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background: var(--teal-action);
  color: white;
}

.button-primary:hover {
  background: var(--teal-action-hover);
}

.printer-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M2.5%208a.5.5%200%201%200%200-1%20.5.5%200%200%200%200%201%22%2F%3E%3Cpath%20d%3D%22M5%201a2%202%200%200%200-2%202v2H2a2%202%200%200%200-2%202v3a2%202%200%200%200%202%202h1v1a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2v-1h1a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-1V3a2%202%200%200%200-2-2zM4%203a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2H4zm1%205a2%202%200%200%200-2%202v1H2a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v3a1%201%200%200%201-1%201h-1v-1a2%202%200%200%200-2-2zm7%202v3a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-3a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M2.5%208a.5.5%200%201%200%200-1%20.5.5%200%200%200%200%201%22%2F%3E%3Cpath%20d%3D%22M5%201a2%202%200%200%200-2%202v2H2a2%202%200%200%200-2%202v3a2%202%200%200%200%202%202h1v1a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2v-1h1a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-1V3a2%202%200%200%200-2-2zM4%203a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2H4zm1%205a2%202%200%200%200-2%202v1H2a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v3a1%201%200%200%201-1%201h-1v-1a2%202%200%200%200-2-2zm7%202v3a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-3a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201%22%2F%3E%3C%2Fsvg%3E");
}

.button-secondary {
  background: white;
  border: 1px solid #cfd8df;
  color: var(--navy);
}

.button-secondary:hover {
  border-color: #9cafbd;
  background: #f8fafb;
}