/* /certificates/ page only. Palette per kind mirrors the PDF: completion blue, professional navy + gold, track teal. */
.ce { --ce-blue: #1a5fd6; --ce-gold: #7d5a17; --ce-gold-l: #c6a75e; --ce-teal: #0d5c5a; --ce-cream: #fffdf7; padding-bottom: 72px; }
.ce .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ce h2 { font: 500 clamp(26px, 2.6vw, 36px)/1.2 var(--f-hero); letter-spacing: -0.01em; margin: 0 0 12px; color: var(--hm-ink); }
.ce h3 { font: 500 20px/1.3 var(--f-hero); margin: 0 0 8px; color: var(--hm-ink); }
.ce code { font: 500 0.92em/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.ce-lead { max-width: 68ch; margin: 0 0 28px; color: var(--hm-ink-2); font-size: 17px; line-height: 1.6; }
.ce-sec { padding-block: clamp(48px, 6vw, 80px) 0; }
.ce-ic { width: 20px; height: 20px; flex: none; }
.ce-ic-s { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 4px; }

/* hero */
.ce-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(24px, 4vw, 56px); }
.ce-hero .hm-title { max-width: 16ch; }
.ce-link { min-height: 48px; display: inline-flex; align-items: center; }
.ce-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; margin: 28px 0 0; color: var(--hm-ink-2); font-size: 15px; }
.ce-facts li { display: flex; align-items: center; gap: 8px; }
.ce-facts .ce-ic { color: var(--ce-gold); }
.ce-sample { margin: 0; min-width: 0; }
.ce-badge { position: absolute; z-index: 1; top: -12px; inset-inline-end: 18px; padding: 6px 14px; border-radius: 999px; background: #b3261e; color: #fff; font: 600 13px/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--hm-e1); }
.ce-sample figcaption { margin-top: 22px; font-size: 14px; line-height: 1.55; color: var(--hm-ink-3); }
.ce-sample figcaption a { color: var(--hm-ink); font-weight: 500; white-space: nowrap; }

/* kinds */
.ce-kinds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ce-kind { border: 1px solid var(--hm-line); border-radius: var(--hm-r); padding: 16px 16px 20px; background: #fff; border-top: 4px solid var(--k); }
.ce-kind.is-completion { --k: var(--ce-blue); } .ce-kind.is-professional { --k: var(--ce-gold-l); } .ce-kind.is-track { --k: var(--ce-teal); }
.ce-thumb { position: relative; display: block; border-radius: 8px; overflow: hidden; box-shadow: var(--hm-e1); margin-bottom: 16px; transition: box-shadow 200ms var(--hm-ease); }
.ce-thumb:hover { box-shadow: var(--hm-e2); }
.ce-thumb img { display: block; width: 100%; height: auto; }
.ce-cost { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hm-ink-3); }
.ce-kind p:last-child { margin: 0; color: var(--hm-ink-2); line-height: 1.55; }
.ce-tablewrap { overflow-x: auto; margin-top: 28px; border: 1px solid var(--hm-line); border-radius: var(--hm-r-s); }
.ce-tablewrap:focus-visible { outline: 2px solid var(--hm-blue); outline-offset: 2px; }
.ce table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ce th, .ce td { padding: 12px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--hm-line); }
.ce tbody tr:last-child > * { border-bottom: 0; }
.ce thead th { font-weight: 500; color: var(--hm-ink-3); font-size: 13px; background: var(--hm-surface); }
.ce-cmp thead th.is-completion { color: var(--ce-blue); } .ce-cmp thead th.is-professional { color: var(--ce-gold); } .ce-cmp thead th.is-track { color: var(--ce-teal); }
.ce-cmp tbody th { font-weight: 500; color: var(--hm-ink-3); width: 18%; }

/* verification */
.ce-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ce-steps li { display: flex; gap: 14px; padding: 18px; border-radius: var(--hm-r-s); background: var(--hm-surface); }
.ce-steps p { margin: 0; line-height: 1.55; color: var(--hm-ink-2); }
.ce-step-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--hm-ink); color: #fff; font-weight: 500; }
.ce-demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; padding: clamp(20px, 3vw, 36px); border-radius: var(--hm-r); border: 1px solid var(--hm-line); background: linear-gradient(180deg, #fff, var(--hm-surface)); scroll-margin-top: 96px; }
.ce-demo-copy p { color: var(--hm-ink-2); line-height: 1.6; }
.ce-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 20px 0 8px; }
.ce-form .co-fl { flex: 1 1 220px; display: grid; gap: 6px; font-size: 14px; color: var(--hm-ink-2); }
.ce-form input { min-height: 48px; padding: 0 14px; border: 1px solid var(--hm-line-2); border-radius: var(--hm-r-s); font: 500 16px/1 ui-monospace, Consolas, monospace; color: var(--hm-ink); background: #fff; }
.ce-form input:focus-visible { outline: 2px solid var(--hm-blue); outline-offset: 1px; }
.ce-form .hm-btn { border: 0; cursor: pointer; }
.ce-shows-h { margin: 20px 0 8px; font-weight: 500; color: var(--hm-ink) !important; }
.ce-shows { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ce-shows li { display: flex; gap: 10px; align-items: flex-start; color: var(--hm-ink-2); }
.ce-shows .ce-ic { color: var(--hm-ok); margin-top: 2px; }
.ce-demo-shot { position: relative; margin: 0; min-width: 0; }
.ce-demo-shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hm-line); box-shadow: var(--hm-e2); }
.ce-demo-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--hm-ink-3); text-align: center; }
.ce-note { margin: 20px 0 0; color: var(--hm-ink-3); font-size: 14px; max-width: 80ch; }

/* course list */
.ce-list a { color: var(--hm-ink); font-weight: 500; text-decoration-color: var(--hm-line-2); text-underline-offset: 3px; }
.ce-list a:hover { text-decoration-color: currentColor; }
.ce-list tbody th { font-weight: 400; min-width: 260px; }
.ce-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ce-pill.is-completion { background: #e8f0fd; color: #1450b8; } .ce-pill.is-professional { background: #f6efdc; color: #6b4c12; } .ce-pill.is-track { background: #e0efec; color: #0b4f4d; }
.ce-soon { font-size: 12px; color: var(--hm-ink-3); white-space: nowrap; }
.ce-h3 { margin-top: 40px !important; }
.ce-tracks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ce-track { padding: 18px 20px; border: 1px solid var(--hm-line); border-radius: var(--hm-r-s); border-inline-start: 4px solid var(--ce-teal); }
.ce-track-k { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; color: var(--hm-ink-3); font-size: 14px; }
.ce-track p:last-child { margin: 0; color: var(--hm-ink-2); line-height: 1.55; }
.ce-plus { color: var(--ce-teal); font-weight: 500; }

/* FAQ, CTA */
.ce-faq details { border-bottom: 1px solid var(--hm-line); max-width: 860px; }
.ce-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 500 18px/1.4 var(--f-hero); color: var(--hm-ink); }
.ce-faq summary::-webkit-details-marker { display: none; }
.ce-faq summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--hm-ink-3); transition: transform 200ms var(--hm-ease); }
.ce-faq details[open] summary::after { transform: rotate(45deg); }
.ce-faq summary:focus-visible { outline: 2px solid var(--hm-blue); outline-offset: 2px; border-radius: 6px; }
.ce-faq details p { margin: 0 0 20px; color: var(--hm-ink-2); line-height: 1.65; max-width: 75ch; }
.ce-cta { margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 4vw, 48px); border-radius: var(--hm-r); background: var(--hm-ink); color: #fff; text-align: center; }
.ce-cta h2 { color: #fff; }
.ce-cta p { color: #cfd6e2; max-width: 56ch; margin: 0 auto 24px; line-height: 1.6; }
.ce-cta .hm-btn { background: #fff; color: var(--hm-ink); }
.ce-cta .hm-btn:hover { background: #e8eefb; color: var(--hm-ink); }
[dir="rtl"] .ce .hm-btn span[aria-hidden] { display: inline-block; transform: scaleX(-1); }

@media (max-width: 960px) {
  .ce-hero, .ce-demo { grid-template-columns: 1fr; }
  .ce-kinds, .ce-steps { grid-template-columns: 1fr; }
  .ce-kinds { max-width: 560px; }
}
@media (max-width: 640px) {
  .ce-tracks { grid-template-columns: 1fr; }
  .ce th, .ce td { padding: 10px 12px; }
  /* phones: one card per course (name, then certificate · level · hours · track) instead of a sideways-scrolling table */
  .ce-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ce-list, .ce-list tbody, .ce-list tr { display: block; width: 100%; }
  .ce-list tr { padding: 12px 14px; border-top: 1px solid var(--hm-line); }
  .ce-list tbody tr:first-child { border-top: 0; }
  .ce-list tbody th { display: block; min-width: 0; padding: 0 0 6px; border: 0; }
  .ce-list td { display: inline-block; padding: 0 10px 0 0; border: 0; font-size: 13px; color: var(--hm-ink-2, #5f6368); }
  .ce-badge { top: -10px; font-size: 12px; }
}

/* certificate sample: kind switcher, paper reveal, seal stamp, frame trace, foil sheen, capped tilt, scan -> verified */
.ce-sample { --ce-dur: 520ms; --ce-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ce-io: cubic-bezier(0.4, 0, 0.2, 1); }
.ce-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 18px; border: 1px solid #d3d9e3; border-radius: 999px; background: #fff; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ce-tab { appearance: none; border: 0; background: none; min-height: 36px; padding: 0 14px; border-radius: 999px; font: 500 14px/1 var(--f-body); color: var(--hm-ink-2); cursor: pointer; white-space: nowrap; transition: background-color 200ms var(--ce-io), color 200ms var(--ce-io); }
.ce-tab:hover { color: var(--hm-ink); background: var(--hm-surface, #f6f8fc); }
.ce-tab[aria-selected="true"] { background: #0b1b36; color: #fff; }
.ce-tabs { position: relative; }
.ce-tab { position: relative; z-index: 1; }
.ce-tab-ind { position: absolute; z-index: 0; top: 3px; left: 0; height: calc(100% - 6px); border-radius: 999px; background: #0b1b36; pointer-events: none; }
.ce-tabs.has-ind .ce-tab[aria-selected="true"] { background: none; }
.ce-tabs.has-ind .ce-tab[aria-selected="true"]:hover { background: none; }
.ce-tab:focus-visible { outline: 2px solid #1a5fd6; outline-offset: -2px; box-shadow: inset 0 0 0 4px #fff; }
.ce-sample figcaption a:focus-visible, .ce-thumb:focus-visible { outline: 2px solid #1a5fd6; outline-offset: 3px; border-radius: 4px; }
.ce-stage { perspective: 1400px; }
.ce-sheet { --rx: 0deg; --ry: 0deg; --mx: 50%; --seal-x: 50%; --seal-y: 72.6%; position: relative; aspect-ratio: 1200 / 849; border-radius: 6px; background: var(--ce-cream); box-shadow: 0 0 0 1px rgba(11, 27, 54, 0.05), 0 1px 3px rgba(11, 27, 54, 0.08), 0 18px 44px -8px rgba(11, 27, 54, 0.18); transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.ce-sheet::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; pointer-events: none; opacity: 0; background: radial-gradient(40% 55% at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.35), transparent 70%); transition: opacity 300ms var(--ce-io, ease); }
.ce-sheet.is-tilting::after { opacity: 1; }
.ce-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 6px; opacity: 0; }
.ce-layer.is-on { opacity: 1; }
.ce-sheet[data-kind="completion"] { --ce-line: #3a5ea8; } .ce-sheet[data-kind="track"] { --ce-line: #1f6b4a; }
.ce-badge { z-index: 2; }
.ce-sheen, .ce-seal-glint, .ce-trace { position: absolute; pointer-events: none; opacity: 0; }
.ce-sheen { inset: 0; border-radius: 6px; z-index: 1; background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 214, 0.55) 48%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 246, 214, 0.55) 52%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: soft-light; }
.ce-seal-glint { z-index: 1; left: var(--seal-x); top: var(--seal-y); width: 11%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 238, 190, 0.4) 40%, transparent 62%); mix-blend-mode: soft-light; }
.ce-trace { inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; stroke: var(--ce-line, #b08d3c); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ce-flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; padding: 0; font: 500 13px/1.2 var(--f-body); color: var(--hm-ink-2); }
.ce-flow li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hm-line); background: #fff; }
.ce-flow-url { min-width: 0; max-width: 100%; }
.ce-flow-url code { font-size: 12px; color: var(--hm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-flow { gap: 8px 14px; }
.ce-flow li { flex: none; }
.ce-flow li.ce-flow-ok::before { content: ""; width: 10px; height: 1px; margin-inline: -18px 2px; background: #9aa5b5; flex: none; }
.ce-flow li.ce-flow-url { order: 3; flex: 1 1 100%; justify-content: flex-start; min-height: 0; padding: 0 2px; border: 0; background: none; }
.ce-flow-ok { color: #0f5c26; border-color: #a9d7b6 !important; background: #f1f9f3 !important; }
.ce-flow-ok .ce-ic { width: 16px; height: 16px; }
.ce-flow-qr { position: relative; overflow: hidden; }
.ce-flow-scan { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; overflow: hidden; }
.ce-flow-scan::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: #1a5fd6; opacity: 0; }
.ce-li { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 8px; color: var(--hm-ink-3) !important; font-weight: 400 !important; text-decoration: none; white-space: normal !important; }
.ce-li:hover { color: var(--hm-ink) !important; text-decoration: underline; }
.ce-faq details { scroll-margin-top: 96px; }
.ce-li .ce-ic { width: 16px; height: 16px; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ce-sheet { transition: transform 450ms var(--ce-out), box-shadow 450ms var(--ce-out); }
  .ce-sheet:hover { will-change: transform; }
  .ce-sheet.is-tilting { transition: transform 120ms linear, box-shadow 300ms var(--ce-out); }
  .ce-sheet:hover { box-shadow: 0 0 0 1px rgba(11, 27, 54, 0.05), 0 2px 4px rgba(11, 27, 54, 0.08), 0 30px 64px -12px rgba(11, 27, 54, 0.24); }
  .ce-tabs.is-ready .ce-tab-ind { transition: transform 280ms cubic-bezier(0.2, 0, 0, 1), width 280ms cubic-bezier(0.2, 0, 0, 1); }
  .ce-layer { transition: opacity 320ms var(--ce-io), transform 420ms var(--ce-out); transform: scale(0.992); }
  .ce-layer.is-on { transform: none; }
  .ce-stage { animation: ce-lift var(--ce-dur) 80ms var(--ce-out) both; }
  [data-cert].is-in .ce-trace { animation: ce-trace 900ms 200ms cubic-bezier(0.65, 0, 0.35, 1) both; }
  [data-cert].is-in .ce-sheet:not(:hover) .ce-sheen { animation: ce-sheen 900ms 1250ms var(--ce-io) both; }
  [data-cert].is-in .ce-seal-glint, .ce-sheet.is-stamp .ce-seal-glint { animation: ce-stamp 480ms 560ms var(--ce-out) both; }
  .ce-sheet.is-stamp .ce-seal-glint { animation-delay: 120ms; }
  .ce-sheet:hover .ce-sheen, .ce-sheet.is-sheen .ce-sheen { animation: ce-sheen 900ms var(--ce-io) both; }
  [data-cert].is-in .ce-flow li { animation: ce-rise 280ms var(--ce-out) both; }
  [data-cert].is-in .ce-flow li:nth-child(1) { animation-delay: 640ms; }
  [data-cert].is-in .ce-flow li:nth-child(2) { animation-delay: 980ms; }
  [data-cert].is-in .ce-flow li:nth-child(3) { animation-delay: 1320ms; }
  [data-cert].is-in .ce-flow-scan::after { animation: ce-scan 420ms 680ms var(--ce-io) 2 both; }
  .ce-thumb img { transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .ce-thumb:hover img, .ce-thumb:focus-visible img { transform: scale(1.015); }
  .ce-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 230, 0.5) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: soft-light; }
  .ce-thumb:hover::after { animation: ce-sheen 800ms cubic-bezier(0.4, 0, 0.2, 1) both; }
}
@keyframes ce-lift { from { transform: translateY(12px) scale(0.992); } to { transform: none; } }
@keyframes ce-trace { 0% { opacity: 0.9; stroke-dashoffset: 1; } 70% { opacity: 0.9; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes ce-stamp { 0% { opacity: 0; transform: scale(1.35); } 45% { opacity: 1; transform: scale(0.96); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ce-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -20% 0; } }
@keyframes ce-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ce-scan { 0% { opacity: 1; top: 0; } 100% { opacity: 1; top: calc(100% - 2px); } }
[dir="rtl"] .ce-sheen, [dir="rtl"] .ce-thumb::after { transform: scaleX(-1); }
[dir="rtl"] .ce-seal-glint { background: radial-gradient(circle at 65% 30%, rgba(255, 255, 255, 0.95), rgba(255, 238, 190, 0.4) 40%, transparent 62%); }
@media (max-width: 640px) {
  .ce-tabs { display: flex; border-radius: 14px; }
  .ce-tab-ind { border-radius: 11px; }
  .ce-tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 6px; border-radius: 11px; font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; hyphens: auto; font-size: 12.5px; }
  :is(:lang(ja), :lang(zh), :lang(ko)) .ce-tab { flex: 1 1 auto; white-space: nowrap; }
  .ce-flow-url code { font-size: 11px; }
}
@media (forced-colors: active) { .ce-sheen, .ce-seal-glint, .ce-trace, .ce-sheet::after { display: none; } .ce-tab[aria-selected="true"] { outline: 2px solid CanvasText; } }
@media print { .ce-tabs, .ce-flow, .ce-sheen, .ce-seal-glint, .ce-trace, .ce-li { display: none !important; } .ce-sheet { box-shadow: none; transform: none !important; } }
.ce-li { display: inline-flex; align-items: center; min-height: 24px; }
.ce-sample figcaption a, .ce-list a { display: inline-flex; align-items: center; min-height: 24px; }