@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Playfair+Display:wght@500;600;700&family=Great+Vibes&family=Inter:wght@400;500;600&display=swap');
/* ============================================================
   Certificate stylesheet — A4 landscape, two-sheet structure.
   Designed for screen (aspect-ratio scaling) + print (physical mm).
   ============================================================ */

.cert-page {
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-muted) 100%);
  padding: 32px 16px 96px;
}
.cert-page__inner { max-width: 1140px; margin: 0 auto; }
.cert-page__intro { margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.cert-page__intro h1 { font-family: var(--serif); font-size: 32px; letter-spacing: -0.01em; }
.cert-page__intro p { color: var(--fg-muted); max-width: 60ch; }
.cert-page__actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   .cert-doc — wrapper for one or more A4 sheets
   ============================================================ */
.cert-doc { display: grid; gap: 28px; }

/* ============================================================
   .cert-sheet — one A4 landscape page (297mm x 210mm)
   ============================================================ */
.cert-sheet {
  /* Paper palette (mastery default — overridden for --self) */
  --paper: #fbf7ee;
  --ink: #14223a;
  --ink-soft: #4b5a76;
  --gold: #b08754;
  --gold-deep: #8a6a40;
  --rule: #d8cdb6;

  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 30px 80px -30px rgba(20, 34, 58, 0.25),
              0 6px 16px -10px rgba(20, 34, 58, 0.12);
  overflow: hidden;

  /* All internal sizing in em → scales with sheet font-size,
     which scales with viewport via clamp. */
  font-family: var(--serif);
  font-size: clamp(10px, 1.05vw, 13px);
  line-height: 1.5;

  padding: 4.2% 5.6%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 1.4em;
}

/* Decorative inner frames — never overlap content (positioned, pointer-events off) */
.cert-sheet::before {
  content: ""; position: absolute; inset: 0.7em;
  border: 1px solid var(--rule); pointer-events: none;
}
.cert-sheet::after {
  content: ""; position: absolute; inset: 1.05em;
  border: 1px solid var(--gold); opacity: 0.4; pointer-events: none;
}

/* ─── Header band (top of every sheet) ──────────────────────────────── */
.cert-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--rule);
}
.cert-head__brand { display: flex; align-items: center; gap: 0.7em; }
.cert-head__mark {
  width: 2.6em; height: 2.6em;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border-radius: 0.5em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4em;
  line-height: 1;
}
.cert-head__issuer { display: flex; flex-direction: column; gap: 0.1em; }
.cert-head__name { font-weight: 600; font-size: 1.05em; }
.cert-head__tag {
  font-size: 0.78em; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-family: var(--sans);
}
.cert-head__type { text-align: right; font-family: var(--sans); }
.cert-head__type-label {
  margin-top: 0.2em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5em;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--ink);
}
.cert-head__type-kicker {
  font-size: 0.78em; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.22em;
}

/* ─── Recipient hero ────────────────────────────────────────────────── */
.cert-hero { text-align: center; align-self: center; }
.cert-hero__present {
  font-family: var(--sans); font-style: italic;
  color: var(--ink-soft); font-size: 0.95em;
}
.cert-hero__recipient {
  margin-top: 0.4em;
  font-size: 3.0em;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cert-hero__divider {
  width: 14em; height: 1px;
  margin: 0.55em auto 0;
  background: var(--gold); opacity: 0.7;
}
.cert-hero__present-2 {
  margin-top: 0.7em;
  font-family: var(--sans); font-style: italic;
  color: var(--ink-soft); font-size: 0.95em;
}
.cert-hero__course-title {
  margin-top: 0.3em;
  font-size: 1.55em;
  font-weight: 500;
  line-height: 1.2;
}

/* ─── Skills section (showcase, mastery) ────────────────────────────── */
.cert-section {
  display: grid;
  align-content: start;
  row-gap: 0.7em;
}
.cert-section__title {
  font-family: var(--sans);
  font-size: 0.72em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cert-skills {
  display: grid;
  row-gap: 0.45em;
}
.cert-skill {
  display: grid;
  grid-template-columns: 1.2em 1fr auto auto;
  column-gap: 1em;
  align-items: baseline;
  padding: 0.45em 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.95em;
}
.cert-skill:first-child { border-top: 0; padding-top: 0; }
.cert-skill__mark { color: var(--gold); font-weight: 700; line-height: 1; }
.cert-skill__name { font-weight: 500; color: var(--ink); }
.cert-skill__level {
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18em 0.55em;
  border-radius: 999px;
  background: rgba(176, 135, 84, 0.12);
  color: var(--gold-deep);
  white-space: nowrap;
}
.cert-skill__hours {
  font-family: ui-monospace, monospace;
  font-size: 0.86em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ─── Footer (signature + credential) ───────────────────────────────── */
.cert-foot {
  display: grid;
  grid-template-columns: 1.4fr auto 1.4fr;
  align-items: end;
  gap: 1.4em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.cert-foot__signer { display: grid; align-content: end; }
.cert-foot__sig-line {
  font-family: "Fraunces", "Snell Roundhand", "Brush Script MT", cursive;
  font-style: italic;
  font-size: 1.9em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.05em;
  margin-bottom: 0.3em;
  line-height: 1.05;
}
.cert-foot__sig-meta {
  font-size: 0.78em;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.cert-foot__seal { display: grid; place-items: center; align-self: center; }
.cert-foot__credential {
  text-align: right;
  font-size: 0.78em;
  color: var(--ink-soft);
  display: grid;
  row-gap: 0.2em;
  align-content: end;
}
.cert-foot__credential code {
  font-family: ui-monospace, monospace;
  color: var(--ink);
  font-size: 1.1em;
  letter-spacing: 0.06em;
}
.cert-foot__credential a { color: var(--gold-deep); }

/* ─── Page 2 (detail mastery) ───────────────────────────────────────── */
.cert-sheet--detail .cert-head__type-label { font-size: 1.2em; }
.cert-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.6em;
  row-gap: 1.4em;
}
.cert-detail-col { display: grid; row-gap: 0.7em; align-content: start; }
.cert-detail-list {
  display: grid;
  row-gap: 0;
  font-family: var(--sans);
  font-size: 0.95em;
}
.cert-detail-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.45em 0;
  border-top: 1px dotted var(--rule);
}
.cert-detail-list__row:first-child { border-top: 0; }
.cert-detail-list__label { color: var(--ink-soft); }
.cert-detail-list__value { font-weight: 600; color: var(--ink); }

.cert-verify {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4em;
  align-items: center;
  padding: 1em 1.2em;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--rule);
  border-radius: 0.5em;
  font-family: var(--sans);
}
.cert-verify__qr {
  width: 7em; height: 7em;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  border-radius: 0.3em;
}
.cert-verify__body { font-size: 0.95em; }
.cert-verify__body strong { display: block; font-size: 1.05em; }
.cert-verify__url {
  font-family: ui-monospace, monospace;
  color: var(--gold-deep);
  word-break: break-all;
  font-size: 0.92em;
  margin-top: 0.3em;
}
.cert-verify__note {
  margin-top: 0.5em;
  font-size: 0.85em; color: var(--ink-soft); line-height: 1.5;
}

/* ─── Self certificate (walkself) palette + variants ────────────────── */
.cert-sheet--self {
  --paper: #f4ecd9;
  --ink: #1f1a24;
  --ink-soft: #5b5363;
  --gold: #b08754;
  --gold-deep: #7a5c34;
  --rule: #d6c8a3;
}
.cert-sheet--self .cert-head__type-label { font-style: italic; font-weight: 500; }
.cert-sheet--self .cert-hero__present {
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78em;
  font-family: var(--sans);
}

.cert-paths { display: grid; row-gap: 0.55em; }
.cert-path {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1em;
  align-items: baseline;
  padding: 0.7em 0.9em;
  border: 1px solid var(--rule);
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.45);
  font-family: var(--sans);
}
.cert-path--top {
  border-color: var(--gold);
  background: rgba(176, 135, 84, 0.08);
}
.cert-path__rank {
  font-size: 0.72em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cert-path__name { margin-top: 0.18em; font-family: var(--serif); font-size: 1.1em; }
.cert-path--top .cert-path__name { font-size: 1.35em; }
.cert-path__why { margin-top: 0.18em; font-size: 0.82em; color: var(--ink-soft); }
.cert-path__align {
  font-family: ui-monospace, monospace;
  font-size: 1.4em;
  color: var(--gold-deep);
  letter-spacing: -0.02em;
}
.cert-path--top .cert-path__align { font-size: 1.85em; font-weight: 600; }
.cert-path__bar {
  grid-column: 1 / -1;
  margin-top: 0.5em;
  height: 0.2em;
  border-radius: 999px;
  background: rgba(176, 135, 84, 0.15);
  overflow: hidden;
}
.cert-path__bar > i { display: block; height: 100%; background: var(--gold); }

.cert-self-foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 1em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.85em;
}
.cert-self-foot__col { display: grid; row-gap: 0.15em; }
.cert-self-foot__label {
  font-size: 0.82em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cert-self-foot__value { color: var(--ink); font-weight: 600; }
.cert-self-foot__sub { font-size: 0.82em; color: var(--ink-soft); }
.cert-self-foot__col--right { text-align: right; }
.cert-self-foot__col--right code {
  font-family: ui-monospace, monospace; color: var(--ink); font-size: 1.05em; letter-spacing: 0.06em;
}

.cert-self-quote {
  margin: 0; text-align: center;
  font-style: italic; font-size: 1.5em; line-height: 1.4;
  color: var(--ink); max-width: 26em; margin-inline: auto;
}
.cert-self-quote::before, .cert-self-quote::after {
  content: "—"; color: var(--gold); margin: 0 0.4em;
}

.cert-shadow-list {
  display: grid; row-gap: 0.7em;
  font-family: var(--sans);
  font-size: 0.95em;
}
.cert-shadow-list li {
  padding: 0.55em 0.9em;
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 0 0.4em 0.4em 0;
  color: var(--ink);
  line-height: 1.5;
}

.cert-disclaimer {
  padding: 1em 1.2em;
  border-left: 3px solid var(--gold);
  background: rgba(176, 135, 84, 0.08);
  font-family: var(--sans);
  font-size: 0.92em;
  color: var(--ink);
  line-height: 1.6;
  border-radius: 0 0.4em 0.4em 0;
}

/* ─── Original SVG seal ──────────────────────────────────────────────── */
.seal {
  --seal-size: 7em;
  width: var(--seal-size); height: var(--seal-size);
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(20, 34, 58, 0.10));
  color: var(--gold-deep);
}
.seal svg { width: 100%; height: 100%; display: block; }
.seal text { fill: var(--gold-deep); font-family: var(--sans); }
.seal__center text { fill: var(--ink); font-family: var(--serif); }
.cert-head .seal { --seal-size: 4.6em; }

/* ─── Print: physical A4 dimensions, one sheet per page ──────────────── */
@media print {
  body { background: white; }
  .cert-page { padding: 0; background: white; }
  .cert-page__intro, .cert-page__actions,
  .site-header, .site-footer, .dev-switcher { display: none !important; }

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

  .cert-doc { gap: 0; }
  .cert-sheet {
    width: 297mm;
    height: 210mm;
    aspect-ratio: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 14mm 18mm;
    font-size: 10.5pt;
    page-break-after: always;
    break-after: page;
  }
  .cert-sheet:last-child { page-break-after: auto; break-after: auto; }
}

/* ─── Mobile viewport scaling (defensive — mobile.css handles details) ─ */
@media (max-width: 720px) {
  .cert-sheet { font-size: clamp(8.5px, 2.6vw, 11px); padding: 5% 6%; }
  .cert-hero__recipient { font-size: 2.4em; }
  .cert-foot { grid-template-columns: 1fr auto; gap: 1em; }
  .cert-foot__credential { text-align: left; }
  .cert-self-foot { grid-template-columns: 1fr; row-gap: 0.6em; }
  .cert-self-foot__col--right { text-align: left; }
  .cert-detail-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PORTRAIT mastery certificate — pickaclass only (:is(.theme-pickaclass, .theme-learnflat))
   Two A4-portrait sheets side by side, matching the design reference.
   ============================================================ */
:is(.theme-pickaclass, .theme-learnflat) .cert-doc {
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-sheet {
  --paper: #FAF7F2;
  --ink: #0F2247;
  --ink-soft: #44506A;
  --gold: #C7A15A;
  --gold-deep: #9A7B3F;
  --light-gold: #E8D7B4;
  --border-gold: #D8BE8A;
  --rule: #E3D7BE;
  --serif: "Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  --sans: "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  aspect-ratio: 210 / 297;                 /* portrait A4 */
  font-size: clamp(9px, 1.18vw, 14px);
  padding: 6% 6.6%;
  row-gap: 1.0em;
}
@media (max-width: 900px) {
  :is(.theme-pickaclass, .theme-learnflat) .cert-doc { grid-template-columns: 1fr; }
}

/* hero sizing */
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__recipient { font-size: 3.5em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__course-title { font-size: 1.55em; }

/* type label: UPPERCASE, two lines, right-aligned (like the reference) */
:is(.theme-pickaclass, .theme-learnflat) .cert-head__type-label {
  text-transform: uppercase;
  font-size: 1.3em;
  letter-spacing: 0.07em;
  line-height: 1.15;
  max-width: 7.5em;
  margin-left: auto;
}

/* skill check = filled gold circle with white tick */
:is(.theme-pickaclass, .theme-learnflat) .cert-skill {
  grid-template-columns: 1.9em 1fr auto auto;
  align-items: center;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-skill__mark {
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: grid; place-items: center;
  font-size: 0.82em; font-weight: 700; line-height: 1;
}

/* diamond ornament on the hero divider + a matching one under the course block */
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__divider {
  position: relative; width: 12em; height: 1px;
  background: var(--gold); opacity: 0.75;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__divider::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0.5em; height: 0.5em; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--paper);
  box-shadow: 0 0 0 0.13em var(--gold);
}

/* gold decorative corner brackets on every sheet */
:is(.theme-pickaclass, .theme-learnflat) .cert-sheet > .cert-corner {
  position: absolute; width: 2.4em; height: 2.4em; pointer-events: none;
  border-color: var(--gold); border-style: solid; border-width: 0; opacity: 0.85;
  z-index: 2;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--tl { top: 1.5em; left: 1.5em; border-top-width: 1.5px; border-left-width: 1.5px; }
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--tr { top: 1.5em; right: 1.5em; border-top-width: 1.5px; border-right-width: 1.5px; }
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--bl { bottom: 1.5em; left: 1.5em; border-bottom-width: 1.5px; border-left-width: 1.5px; }
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--br { bottom: 1.5em; right: 1.5em; border-bottom-width: 1.5px; border-right-width: 1.5px; }
:is(.theme-pickaclass, .theme-learnflat) .cert-corner::after {
  content: ""; position: absolute; width: 0.42em; height: 0.42em;
  background: var(--gold); transform: rotate(45deg);
}
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--tl::after { top: -0.21em; left: -0.21em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--tr::after { top: -0.21em; right: -0.21em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--bl::after { bottom: -0.21em; left: -0.21em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-corner--br::after { bottom: -0.21em; right: -0.21em; }

/* page 2: fix label/value collision + wrapping in the narrower portrait column */
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-grid { column-gap: 1.1em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list { font-size: 0.8em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list__row {
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: 0.7em;
  align-items: start;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list__label { line-height: 1.25; }
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list__value {
  text-align: right; white-space: nowrap;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-col .cert-section__title { font-size: 0.66em; }
/* The LAST row of cert-detail-list is the wrappable one — either the
 * Verified Skill Path benchmark value or the Phase 25 capstone title (which
 * can be 30-40 chars in some languages). Allow up to 16em wrap width. */
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list__row:last-child .cert-detail-list__value {
  white-space: normal; max-width: 16em; line-height: 1.25; font-size: 0.95em;
}

/* cert-wave-watermark: ultra-subtle flowing waves behind the hero (brief) */
:is(.theme-pickaclass, .theme-learnflat) .cert-sheet {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%20viewBox%3D%270%200%20260%20260%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523D8BE8A%27%20stroke-width%3D%271.3%27%20opacity%3D%270.55%27%3E%3Cpath%20d%3D%27M-30%2046%20Q%2050%2016%20130%2046%20T%20290%2046%20T%20450%2046%27%2F%3E%3Cpath%20d%3D%27M-30%2072%20Q%2050%2050%20130%2072%20T%20290%2072%20T%20450%2072%27%2F%3E%3Cpath%20d%3D%27M-30%2098%20Q%2050%2068%20130%2098%20T%20290%2098%20T%20450%2098%27%2F%3E%3Cpath%20d%3D%27M-30%20124%20Q%2050%20102%20130%20124%20T%20290%20124%20T%20450%20124%27%2F%3E%3Cpath%20d%3D%27M-30%20150%20Q%2050%20120%20130%20150%20T%20290%20150%20T%20450%20150%27%2F%3E%3Cpath%20d%3D%27M-30%20176%20Q%2050%20154%20130%20176%20T%20290%20176%20T%20450%20176%27%2F%3E%3Cpath%20d%3D%27M-30%20202%20Q%2050%20172%20130%20202%20T%20290%20202%20T%20450%20202%27%2F%3E%3Cpath%20d%3D%27M-30%20228%20Q%2050%20206%20130%20228%20T%20290%20228%20T%20450%20228%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center 34%;
  background-size: 116% auto;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-sheet--detail {
  background-position: center 30%;
  background-size: 104% auto;
}

/* ── premium brief refinements (portrait / pickaclass) ── */
:is(.theme-pickaclass, .theme-learnflat) .cert-sheet::before { border-color: var(--border-gold); opacity: 1; }
:is(.theme-pickaclass, .theme-learnflat) .cert-sheet::after  { border-color: var(--gold); opacity: 0.5; }

:is(.theme-pickaclass, .theme-learnflat) .cert-hero__recipient { font-weight: 700; letter-spacing: 0.035em; color: var(--ink); }
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__course-title { font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
:is(.theme-pickaclass, .theme-learnflat) .cert-head__type-kicker,
:is(.theme-pickaclass, .theme-learnflat) .cert-head__tag { letter-spacing: 0.15em; }

:is(.theme-pickaclass, .theme-learnflat) .cert-skill { grid-template-columns: 1.9em 1fr auto auto; column-gap: 0.7em; align-items: center; }
:is(.theme-pickaclass, .theme-learnflat) .cert-skill__name { font-family: var(--serif); font-size: 1.08em; color: var(--ink); }
:is(.theme-pickaclass, .theme-learnflat) .cert-skill__mark { background: var(--gold); }
:is(.theme-pickaclass, .theme-learnflat) .cert-skill__level {
  justify-self: end;
  font-family: var(--sans); font-size: 0.6em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: 1;
  color: var(--gold-deep);
  border: 1px solid var(--border-gold); border-radius: 999px;
  padding: 0.42em 0.95em; background: rgba(232,215,180,0.20); white-space: nowrap;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-skill__hours {
  font-family: var(--sans); font-size: 0.72em; color: var(--ink-soft);
  letter-spacing: 0.03em; min-width: 3.2em; text-align: right;
}

/* embossed seal ~160px presence */
:is(.theme-pickaclass, .theme-learnflat) .cert-foot__seal .seal { width: 8.4em; height: 8.4em; margin: 0 auto; }
:is(.theme-pickaclass, .theme-learnflat) .cert-foot__seal .seal svg { width: 100%; height: 100%; display: block; }

/* page-2 detail labels/values use Inter for crisp data */
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list__label,
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list__value { font-family: var(--sans); }
:is(.theme-pickaclass, .theme-learnflat) .cert-detail-list__value { color: var(--ink); font-weight: 500; }

/* verify-card-polish: clean URL wrapping + serif headline on the page-2 verify card */
:is(.theme-pickaclass, .theme-learnflat) .cert-verify { column-gap: 0.9em; align-items: start; }
:is(.theme-pickaclass, .theme-learnflat) .cert-verify__body strong { font-family: var(--serif); font-size: 1.15em; color: var(--ink); letter-spacing: 0.01em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-verify__url {
  font-family: var(--sans); font-size: 0.8em; letter-spacing: 0;
  overflow-wrap: anywhere; word-break: break-all; color: var(--gold-deep);
}
:is(.theme-pickaclass, .theme-learnflat) .cert-verify__note { font-family: var(--sans); font-size: 0.72em; line-height: 1.45; }
:is(.theme-pickaclass, .theme-learnflat) .cert-sheet--detail .cert-foot__seal .seal { width: 7em; height: 7em; }

/* handwritten-signature: signer name in a script hand */
:is(.theme-pickaclass, .theme-learnflat) .cert-foot__sig-line {
  font-family: "Great Vibes", "Segoe Script", cursive;
  font-size: 2.5em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--ink);
}

/* signature-oneline: keep the script signature on a single line */
:is(.theme-pickaclass, .theme-learnflat) .cert-foot__sig-line { font-size: 1.95em; white-space: nowrap; line-height: 1.1; }

/* Single learning-outcome (real-course mastery cert) -> elegant prose, not a broken skill-row */
.cert-outcome {
  display: block; max-width: 30em; margin: 0.6em auto 0;
  text-align: center; font-family: var(--serif);
  font-size: 1.12em; line-height: 1.55; color: var(--ink);
}
.cert-outcome__mark {
  display: flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; margin: 0 auto 0.7em;
  border-radius: 50%; background: var(--gold); color: #fff;
  font-size: 0.8em; font-weight: 700;
}
.cert-outcome__text { display: block; }


/* ============================================================
   RU / long-token overflow fix (pickaclass portrait mastery).
   Russian words (e.g. "СЕРТИФИКАТ") and the verify URL are longer
   than the English originals and were spilling past the decorative
   gold ::after frame. Keep them inside their padding box.
   ============================================================ */
:is(.theme-pickaclass, .theme-learnflat) .cert-head__type-label {
  font-size: 1.12em;
  letter-spacing: 0.045em;
  max-width: 9.4em;
  overflow-wrap: break-word;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-foot__credential {
  min-width: 0;
  font-size: 0.72em;
}
:is(.theme-pickaclass, .theme-learnflat) .cert-foot__credential a,
:is(.theme-pickaclass, .theme-learnflat) .cert-foot__credential code {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ============================================================
   Roomier hero rhythm (pickaclass portrait mastery) — a little
   more air between recipient / course / skills blocks.
   ============================================================ */
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__recipient { margin-top: 0.5em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__divider   { margin-top: 1.0em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-hero__present-2 { margin-top: 1.0em; }
:is(.theme-pickaclass, .theme-learnflat) .cert-section         { row-gap: 0.95em; }