* {
  box-sizing: border-box;
}

@page {
  size: A4 portrait;
  margin: 0;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #eeeeee;
  color: #3e4144;
  font-family: Arial, Helvetica, sans-serif;
}

.certificate {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  margin: 18px auto;
  padding: 10mm 3mm 7mm;
  overflow: hidden;
  background: #fff;
  border: 1px solid #b8b8b8;
}

.certificate-number {
  position: absolute;
  top: 57mm;
  right: 7mm;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: #111;
  font-size: 11pt;
}

.original {
  color: #bd6877;
  font-size: 11pt;
}

.header {
  text-align: center;
}

.pencom-logo {
    width: 115px;
    height: 210px;
    margin: 0 auto 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pencom-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.logo-rays {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 20%, 100% 78%, 50% 100%, 0 78%, 0 20%);
}

.logo-rays i {
  display: block;
  width: 14%;
  background: #777;
  transform: skewY(-9deg);
}

.logo-rays i:nth-child(odd) { background: #4d4d4d; }
.logo-rays i:nth-child(even) { background: #b9b9b9; }

.crest {
  position: absolute;
  top: 10mm;
  left: 50%;
  width: 11mm;
  height: 11mm;
  transform: translateX(-50%);
  border: 1px solid #aaa;
  border-radius: 50%;
  background: #f7f7f7;
  color: #a12c2c;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: bold;
  box-shadow: 0 1px 4px #777;
}

.crest small {
  position: absolute;
  top: 5mm;
  color: #17633e;
  font-size: 6px;
}

.ribbon {
  position: absolute;
  top: 21mm;
  left: -2mm;
  width: 31mm;
  padding: 1.5mm 0;
  background: linear-gradient(#eee, #888, #eee);
  color: #222;
  font-family: Georgia, serif;
  font-size: 15pt;
  font-weight: bold;
  transform: perspective(50px) rotateX(-5deg);
  box-shadow: 0 2px 2px #555;
}

h1 {
  margin: 0 0 5mm;
  color: #34383b;
  font-size: 29pt;
  line-height: 1.1;
  font-weight: 700;
}

.rule {
  height: 1px;
  background: #dedede;
  margin: 0 0 5mm;
}

h2 {
  margin: 0 0 7mm;
  text-align: center;
  color: #5b5e61;
  font-size: 19pt;
}

.employer-code {
  display: flex;
  align-items: baseline;
  gap: 10mm;
  margin: 0 0 6mm 11mm;
  font-size: 13pt;
  color: #626262;
}

.employer-code strong {
  display: inline-block;
  min-width: 53mm;
  padding: 0 6mm 2mm;
  border-bottom: 1px solid #aaa;
  color: #111;
  font-size: 14pt;
  font-weight: 400;
}

.certificate-body {
  position: relative;
  z-index: 0;
  text-align: center;
}

.watermark {
  position: absolute;
  z-index: -1;
  top: 7mm;
  left: 50%;
  width: 112mm;
  height: 112mm;
  transform: translateX(-50%);
  border: 4px solid rgba(74, 139, 105, .68);
  border-radius: 50%;
  color: rgba(65, 135, 99, .66);
  pointer-events: none;
}

.checkmark {
  position: absolute;
  left: 24mm;
  top: 17mm;
  width: 48mm;
  height: 69mm;
  border-right: 13mm solid rgba(65, 135, 99, .65);
  border-bottom: 13mm solid rgba(65, 135, 99, .65);
  transform: rotate(39deg) skew(-8deg, -8deg);
}

.watermark span {
  position: absolute;
  top: 62mm;
  left: 44mm;
  transform: rotate(-22deg);
  font-size: 29pt;
  letter-spacing: 2px;
  font-weight: 500;
}

.certify {
  margin: 0 0 13mm;
  padding-top: 1mm;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31pt;
  font-weight: bold;
  color: #5b5d60;
}

.company-line {
  display: grid;
  grid-template-columns: 64% 10% 26%;
  align-items: end;
  min-height: 12mm;
  margin: 0 2mm 7mm;
  border-bottom: 1px solid #999;
  color: #111;
  font-size: 16pt;
}

.company-name {
  text-align: center;
  padding-bottom: 1mm;
  white-space: nowrap;
}

.rc-label {
  color: #686868;
  font-size: 15pt;
  padding-bottom: 1mm;
}

.rc-number {
  text-align: center;
  padding-bottom: 1mm;
}

.compliance {
  margin: 0 0 5mm;
  font-size: 14pt;
  font-weight: bold;
  color: #5a5d60;
}

.details {
  margin: 0 0 7mm;
  font-size: 14pt;
  font-weight: bold;
  color: #5a5d60;
}

.contributions {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #111;
  font-size: 12.5pt;
  text-align: center;
}

.contributions .description-col { width: 55%; }
.contributions col:not(.description-col) { width: 15%; }

.contributions th,
.contributions td {
  border: 1.5px solid #888;
  padding: 2.2mm 1.8mm;
  vertical-align: middle;
}

.contributions thead th {
  color: #5b5d60;
  font-weight: bold;
}

.contributions th:first-child {
  text-align: left;
}

.contributions tbody th {
  color: #5b5d60;
  font-weight: bold;
  white-space: nowrap;
}

.expiry {
  margin: 9mm 12mm 0 0;
  text-align: right;
  color: #686868;
  font-size: 12pt;
}

.expiry strong {
  color: #111;
  border-bottom: 2px solid #111;
  padding: 0 1mm 1mm;
}

.signature-area {
  position: absolute;
  right: 12mm;
  bottom: 7mm;
  width: 53mm;
  height: 22mm;
  text-align: center;
}

.signature {
  height: 15mm;
  color: #111;
  font-family: "Brush Script MT", cursive;
  font-size: 15pt;
  font-style: italic;
  transform: rotate(-8deg);
  opacity: .9;
}

.signature-line {
  border-bottom: 1px solid #333;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .certificate {
    width: 100%;
    min-height: 0;
    aspect-ratio: 210 / 297;
    margin: 0;
    padding: 4.76% 1.43% 3.33%;
    transform-origin: top left;
  }

  h1 { font-size: clamp(14px, 4vw, 29pt); }
  h2 { font-size: clamp(11px, 2.6vw, 19pt); }
  .certify { font-size: clamp(17px, 4.2vw, 31pt); }
  .company-line, .contributions { font-size: clamp(6px, 1.7vw, 16pt); }
  .compliance, .details { font-size: clamp(7px, 1.8vw, 14pt); }
  .employer-code, .expiry { font-size: clamp(7px, 1.7vw, 13pt); }
  .contributions th, .contributions td { padding: 1.1% .7%; }
  .watermark { width: 53.3%; height: auto; aspect-ratio: 1; }
  .pencom-logo { transform: scale(.75); transform-origin: top center; margin-bottom: 12%; }
  .certificate-number { top: 19.2%; font-size: clamp(6px, 1.5vw, 11pt); }
}

@media print {
  html, body { background: #fff; }
  .certificate {
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}