@font-face{font-family:'SoTinos';src:url('../fonts/certificate/Tinos-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SoTinos';src:url('../fonts/certificate/Tinos-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SoTinos';src:url('../fonts/certificate/Tinos-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}

.so{--ink:#16352c;--green:#17634c;--deep:#0f2e25;--paper:#ffffff;--mist:#e7efe9;--foil:#b8892b;--foil-soft:#f3e7c9;--muted:#4f675d;color:var(--ink)}
.so h1,.so h2,.so h3{font-family:'SoTinos',Georgia,serif;letter-spacing:0;color:var(--deep)}
.so h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;margin:0 0 20px;font-weight:700}
.so h3{font-size:21px;line-height:1.3;margin:0 0 8px}
.so p{max-width:64ch}
.so section{margin:0 0 88px}

/* Hero */
.so-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;padding-top:24px}
.so-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;font-weight:700;margin:0 0 22px}
.so-lead{font-size:19px;line-height:1.6;color:var(--ink);margin:0 0 28px}
.so-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.so .so-cta{padding:14px 26px;font-size:17px;border-radius:8px;margin:0}
.so-link{font-weight:600;border-bottom:2px solid var(--foil-soft);padding-bottom:2px}
.so-link:hover{text-decoration:none;border-bottom-color:var(--foil)}
.so-note{color:var(--muted);font-size:14px;margin-top:18px}

/* The certificate is the hero image */
.so-cert{margin:0}
.so-cert__paper{position:relative;aspect-ratio:297/210;background:var(--paper);border:1px solid #d9e2dc;border-radius:4px;padding:7% 9% 6%;box-shadow:0 22px 50px -24px #0f2e2566;text-align:center;display:flex;flex-direction:column;justify-content:center;outline:2px solid var(--foil);outline-offset:-14px}
.so-cert__paper::before{content:'';position:absolute;inset:20px;border:1px solid var(--foil-soft);pointer-events:none}
.so-cert p{max-width:none;margin:0}
.so-cert__kind{font-family:'SoTinos',Georgia,serif;font-weight:700;font-size:clamp(20px,2.4vw,30px);color:var(--deep);letter-spacing:.06em}
.so-cert__given,.so-cert__for{font-family:'SoTinos',Georgia,serif;font-style:italic;color:var(--muted);font-size:clamp(12px,1.2vw,15px);margin-top:10px!important}
.so-cert__name{font-family:'SoTinos',Georgia,serif;font-weight:700;color:var(--green);font-size:clamp(22px,2.9vw,38px);line-height:1.15;margin:8px auto 2px!important;padding-bottom:8px;border-bottom:1px solid var(--foil);min-height:1.3em;transition:opacity .35s ease,transform .35s ease}
.so-cert__name.is-changing{opacity:0;transform:translateY(6px)}
.so-cert__event{font-family:'SoTinos',Georgia,serif;font-weight:700;font-size:clamp(14px,1.5vw,19px);color:var(--deep);margin-top:4px!important}
.so-cert__meta{font-size:clamp(11px,1vw,13px);color:var(--muted);margin-top:4px!important}
.so-cert__foot{position:absolute;left:9%;right:9%;bottom:8%;display:flex;justify-content:space-between;align-items:flex-end}
.so-cert__no{font-size:clamp(9px,.85vw,11px);color:var(--muted);letter-spacing:.04em}
.so-cert__foot img{width:clamp(40px,5vw,64px);height:auto;image-rendering:pixelated}
.so-cert figcaption{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}

/* Demo */
.so-demo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:center;background:var(--deep);color:#e9f1ec;border-radius:16px;padding:32px}
.so-demo h2{color:#fff}
.so-demo p{color:#c3d6cc}
.so-demo video{display:block;width:100%;height:auto;border-radius:10px;background:#000}

/* Steps: a real sequence, so it is numbered */
.so-steps ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;counter-reset:step}
.so-steps li{counter-increment:step;border-top:3px solid var(--green);padding-top:18px}
.so-steps li::before{content:counter(step);display:block;font-family:'SoTinos',Georgia,serif;font-weight:700;font-size:44px;line-height:1;color:var(--foil);margin-bottom:12px}
.so-steps li p{color:var(--muted);margin:0}

.so-steps ol.so-steps__five{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.so-steps__five h3{font-size:18px}
.so-steps__cta{margin-top:32px}

/* What participants receive */
.so-receive dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #d9e2dc;border-radius:12px;background:#fff;overflow:hidden}
.so-receive dl>div{padding:26px;border-left:1px solid #d9e2dc}
.so-receive dl>div:first-child{border-left:0}
.so-receive dt{font-weight:700;font-size:17px;margin-bottom:6px}
.so-receive dd{margin:0;color:var(--muted)}

/* Pricing */
.so-price__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;align-items:start}
.so-price__grid--single{grid-template-columns:minmax(0,680px)}
.so-price__free{background:var(--mist);border-radius:12px;padding:28px}
.so-price__amount{font-family:'SoTinos',Georgia,serif;font-weight:700;font-size:44px;line-height:1;color:var(--green);margin:0 0 14px}
.so-price__email{background:#fff;border:1px solid #d9e2dc;border-radius:12px;padding:28px}
.so-price__email p{color:var(--muted)}
.so-price table{margin-top:12px;background:transparent}
.so-price th,.so-price td{padding:10px 4px;font-size:15px}
.so-price td:last-child,.so-price th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* FAQ */
.so-faq details{border-bottom:1px solid #d9e2dc;margin:0;padding:16px 0}
.so-faq summary{font-weight:650;font-size:17px}
.so-faq details p{color:var(--muted);margin:10px 0 0}

/* Closing call to action */
.so-end{text-align:center;padding:56px 24px;background:var(--mist);border-radius:16px}
.so-end h2{margin-bottom:24px}
.so-end p{margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .so-hero,.so-demo,.so-price__grid{grid-template-columns:1fr}
  .so-hero{gap:36px}
  .so-steps ol,.so-steps ol.so-steps__five,.so-receive dl{grid-template-columns:1fr}
  .so-receive dl>div{border-left:0;border-top:1px solid #d9e2dc}
  .so-receive dl>div:first-child{border-top:0}
  .so section{margin-bottom:64px}
  .so-demo{padding:20px}
}
@media (max-width:600px){
  .so-cert__paper{aspect-ratio:auto;padding:34px 24px 24px;outline-offset:-10px}
  .so-cert__paper::before{inset:14px}
  .so-cert__foot{position:static;margin-top:18px}
}
@media (prefers-reduced-motion:reduce){.so-cert__name{transition:none}}