/* ============================================================
   INUK — Certificate component (Pioneer / Founding User)
   Uses brand.css tokens & fonts. Print-friendly.
   Content sizing is in container-query units (cqw) so the whole
   certificate scales to fill its frame at ANY render size
   (screen, high-res PNG capture, A4 print) — no under-fill.
   ============================================================ */
.cert-stage{width:100%}
.cert{position:relative;width:100%;max-width:920px;margin:0 auto;aspect-ratio:1.414/1;
  container-type:inline-size;
  background:radial-gradient(135% 135% at 50% -12%,#fffefb,#fbf2df);
  border-radius:12px;box-shadow:0 26px 64px rgba(27,31,59,.20);
  overflow:hidden;font-family:var(--font-body);color:var(--navy)}

/* gold frame + corner gems */
.cert .frame{position:absolute;inset:2cqw;border:0.22cqw solid #dfb44a;border-radius:0.8cqw;pointer-events:none}
.cert .frame::before{content:"";position:absolute;inset:0.55cqw;border:0.11cqw solid #eccf86;border-radius:0.45cqw}
.cert .cor{position:absolute;width:1cqw;height:1cqw;background:#dfb44a;transform:rotate(45deg);z-index:3;box-shadow:0 0 0 0.22cqw #fffefb}
.cert .cor.tl{top:1.5cqw;left:1.5cqw}.cert .cor.tr{top:1.5cqw;right:1.5cqw}
.cert .cor.bl{bottom:1.5cqw;left:1.5cqw}.cert .cor.br{bottom:1.5cqw;right:1.5cqw}

/* soft brand background motif */
.cert-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.cert-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:5.5cqw 7.5cqw}

.cert-logo{height:5.4cqw;width:auto;display:block;margin:0 auto}

.cert-kicker{margin-top:2cqw;font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:1.35cqw;color:#b5780a}
.cert-pre{margin-top:2.1cqw;color:var(--grey);font-size:1.55cqw;font-style:italic}
.cert-name{font-family:var(--font-display);font-weight:800;font-size:5.8cqw;line-height:1.04;margin:0.5cqw 0 0}
.cert-rule{width:14cqw;height:0.34cqw;margin:1.5cqw 0 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,#dfb44a 38%,#dfb44a 62%,transparent)}
.cert-desc{max-width:62cqw;margin:2cqw 0 0;color:#46464f;font-size:1.72cqw;line-height:1.6}
.cert-desc b{color:var(--navy);font-weight:700}
.cert-tagline{margin-top:1.8cqw;font-family:var(--font-display);font-weight:800;color:var(--navy);letter-spacing:.06em;font-size:1.95cqw}
.cert-tagline .hl{color:#c98a12}
.cert-tagline .d{color:#d7a93e;font-weight:700}
.cert-seal{margin-top:auto;margin-bottom:auto;width:17cqw}
.cert-seal svg{display:block;width:100%;height:auto}

.cert-foot{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:2cqw}
.cert-sign{text-align:center;flex:0 0 auto;min-width:13cqw}
.cert-sign .sig{font-family:"Segoe Script","Bradley Hand","Snell Roundhand","Brush Script MT",cursive;font-size:2.7cqw;color:var(--navy);line-height:1;padding-bottom:0.35cqw}
.cert-sign .line{border-top:0.16cqw solid #c9ccd8;padding-top:0.7cqw;font-size:1.18cqw;color:var(--grey);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.cert-verify{flex:1;min-width:0;font-size:1.18cqw;color:var(--grey);line-height:1.55;align-self:flex-end;padding-bottom:0.25cqw}
.cert-verify b{color:var(--navy);letter-spacing:.03em}
.cert-verify .vlink{color:#c98a12;font-weight:800;letter-spacing:0}

/* ---- Founding User variant: green/teal theme (site-card colours) ---- */
.cert-founding{background:radial-gradient(135% 135% at 50% -12%,#fbfffd,#e8f6ef)}
.cert-founding .frame{border-color:#86cfae}
.cert-founding .frame::before{border-color:#cdeede}
.cert-founding .cor{background:#4fb68c;box-shadow:0 0 0 0.22cqw #fbfffd}
.cert-founding .cert-kicker{color:#0c6b62}
.cert-founding .cert-rule{background:linear-gradient(90deg,transparent,#4fb68c 38%,#4fb68c 62%,transparent)}
.cert-founding .cert-tagline .hl{color:#0c6b62}
.cert-founding .cert-tagline .d{color:#2bb673}
.cert-founding .cert-verify .vlink{color:#0e9384}

/* ---- small screens: drop container units, stack the footer ---- */
@media(max-width:760px){
  .cert{aspect-ratio:3/4;container-type:normal}
  .cert-body{padding:34px 30px;justify-content:flex-start}
  .cert-logo{height:42px}
  .cert-kicker{margin-top:14px;font-size:11.5px}
  .cert-pre{margin-top:15px;font-size:13.5px}
  .cert-name{font-size:34px;margin-top:4px}
  .cert-rule{width:120px;height:3px;margin-top:12px}
  .cert-desc{max-width:none;margin-top:14px;font-size:13.5px}
  .cert-tagline{margin-top:11px;font-size:15px}
  .cert-seal{margin-top:12px;width:130px}
  .cert-foot{flex-direction:column;gap:14px;align-items:center}
  .cert-sign{min-width:0}.cert-sign .sig{font-size:24px}.cert-sign .line{font-size:10.5px;padding-top:6px}
  .cert-verify{font-size:10.5px;text-align:center}
}