:root{
  --paper:#ffffff;
  --paper-warm:#faf6f5;
  --blood:#8c0d1c;
  --blood-bright:#b0182a;
  --blood-pale:#e8c9cd;
  --gold:#a9851f;
  --gold-light:#d9b65c;
  --ink:#3a1418;
  --ink-soft:#6e4448;
  --rule:#d8bfc2;
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper-warm);
  color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.6;
  font-variant-numeric:tabular-nums;
}

/* Browser surfaces theming */
::selection{background:var(--blood);color:#fff}
::-moz-selection{background:var(--blood);color:#fff}
html{scrollbar-color:var(--blood-pale) var(--paper-warm);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-warm)}
::-webkit-scrollbar-thumb{background:var(--blood-pale);border:3px solid var(--paper-warm);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--blood)}
:focus-visible{outline:2px solid var(--blood);outline-offset:3px}
a{color:var(--blood);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--blood-bright)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--blood);color:#fff;padding:.6rem 1rem}

/* ---- the certificate ---- */
.sheet{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:clamp(.75rem,2.5vw,2.75rem);
}

.cert{
  width:min(1180px,100%);
  background:var(--paper);
  position:relative;
  display:grid;
  grid-template-columns:1.62fr .95fr;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(58,20,24,.09),0 18px 48px -28px rgba(58,20,24,.45);
}

/* engraved double rule */
.cert::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid var(--blood);
  pointer-events:none;
}
.cert::after{
  content:"";
  position:absolute;
  inset:14px;
  border:3px double var(--blood);
  opacity:.5;
  pointer-events:none;
}

.face{padding:clamp(1.9rem,3.6vw,4rem)}
.stub{
  padding:clamp(1.9rem,3.2vw,3.1rem) clamp(1.6rem,2.6vw,2.6rem) clamp(7.5rem,12vw,11rem);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'><g fill='none' stroke='%238c0d1c' stroke-width='0.5' opacity='0.24'><path d='M0 8 C 15 -4, 25 20, 40 8 S 65 -4, 80 8 S 105 20, 120 8'/><path d='M0 12 C 15 0, 25 24, 40 12 S 65 0, 80 12 S 105 24, 120 12'/><path d='M0 16 C 15 4, 25 28, 40 16 S 65 4, 80 16 S 105 28, 120 16'/><path d='M0 20 C 15 8, 25 32, 40 20 S 65 8, 80 20 S 105 32, 120 20'/><path d='M0 24 C 15 12, 25 36, 40 24 S 65 12, 80 24 S 105 36, 120 24'/><path d='M0 28 C 15 16, 25 40, 40 28 S 65 16, 80 28 S 105 40, 120 28'/><path d='M0 32 C 15 20, 25 44, 40 32 S 65 20, 80 32 S 105 44, 120 32'/></g></svg>") repeat,var(--paper);
  background-size:120px 40px;
  display:flex;
  flex-direction:column;
}

/* true perforation */
.perf{
  position:absolute;
  top:22px;bottom:22px;
  left:calc(1.62 / (1.62 + .95) * 100%);
  width:0;
  border-left:2px dotted var(--blood);
  opacity:.55;
}

.watermark{
  position:absolute;
  left:-7%;
  bottom:-16%;
  width:min(42%,390px);
  aspect-ratio:1;
  z-index:0;
  pointer-events:none;
}
.wm-line{fill:none;stroke:var(--blood);stroke-width:.16;opacity:.11}
.face,.stub{position:relative;z-index:1}
.face{background:transparent}

h1{
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:500;
  font-size:clamp(2.05rem,1.05rem + 4.4vw,5.1rem);
  line-height:.94;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
  margin:.1em 0 .34em;
  text-wrap:balance;
}

.issuer{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(1rem,.94rem + .3vw,1.2rem);
  font-style:italic;
  color:var(--blood);
  margin:0 0 1.9rem;
}

.lede{
  max-width:var(--measure);
  font-size:clamp(1.02rem,.96rem + .35vw,1.22rem);
  line-height:1.55;
  margin:0 0 2.3rem;
}

/* engraved ornament: a drawn hairline band, not a plain rule */
.ornament{
  height:9px;
  margin:0 0 2rem;
  background:
    radial-gradient(circle at 5px 50%,transparent 3.1px,var(--blood) 3.1px,var(--blood) 3.7px,transparent 3.8px) repeat-x 0 0/10px 9px;
  opacity:.55;
}
.cert--vip .ornament{
  background:
    radial-gradient(circle at 5px 50%,transparent 3.1px,var(--gold) 3.1px,var(--gold) 3.7px,transparent 3.8px) repeat-x 0 0/10px 9px;
}

/* engraved ruled session list */
.sessions{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.sessions li{
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:.9rem;
  align-items:baseline;
  padding:.82rem .2rem;
  border-bottom:1px solid var(--rule);
}
.sessions .day{
  font-size:.73rem;
  letter-spacing:.1em;
  color:var(--blood);
  font-variant-numeric:tabular-nums;
}
.sessions .what{font-size:.99rem;line-height:1.45}

.runtime{
  margin:1.45rem 0 0;
  font-size:.88rem;
  color:var(--ink-soft);
}

/* ---- stub contents ---- */
.fields{
  display:grid;
  grid-template-columns:auto 1fr;
  margin:0;
  font-size:.83rem;
  border-top:1px solid var(--rule);
}
.fields dt{
  color:var(--ink-soft);
  padding:.52rem .9rem .52rem 0;
  border-bottom:1px solid var(--rule);
}
.fields dd{
  margin:0;
  padding:.52rem 0;
  border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.price{margin:auto 0 0;padding-top:2.4rem;line-height:1}
.price .was{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.55rem;
  color:var(--ink-soft);
  text-decoration:line-through;
  text-decoration-color:var(--blood);
  text-decoration-thickness:2px;
}
.price .now{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(2.7rem,2rem + 2vw,3.6rem);
  display:block;
  margin-top:.12em;
  letter-spacing:-.02em;
}
.price .term{
  display:block;
  margin-top:.5em;
  font-size:.83rem;
  color:var(--ink-soft);
  max-width:30ch;
}

form{margin-top:1.9rem}
label{display:block;font-size:.83rem;margin-bottom:.45rem}
input[type=email]{
  width:100%;
  font:inherit;
  font-size:1rem;
  padding:.82rem .9rem;
  border:1px solid var(--blood);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  caret-color:var(--blood);
}
input[type=email]::placeholder{color:#9a7276}
input[type=email]:focus-visible{outline:2px solid var(--blood);outline-offset:2px}
input[type=email][aria-invalid=true]{background:#fdf3f4}

.err{
  display:block;
  min-height:1.3em;
  margin-top:.4rem;
  font-size:.82rem;
  color:var(--blood);
}

button{
  width:100%;
  font:inherit;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.005em;
  padding:.92rem 1rem;
  border:1px solid var(--blood);
  border-radius:0;
  background:var(--blood);
  color:#fff;
  cursor:pointer;
  transition:background .18s cubic-bezier(.2,.8,.3,1);
}
button:hover:not(:disabled){background:var(--blood-bright)}
button:active:not(:disabled){background:#760a17}
button:disabled{opacity:.55;cursor:progress}

.fine{margin:.85rem 0 0;font-size:.78rem;color:var(--ink-soft)}

/* ---- seal ---- */
.seal{
  position:absolute;
  left:calc(1.62 / (1.62 + .95) * 100%);
  bottom:clamp(1.1rem,2.2vw,1.8rem);
  translate:-50% 0;
  width:clamp(104px,10.5vw,142px);
  aspect-ratio:1;
  z-index:3;
  pointer-events:none;
}
.seal svg{width:100%;height:100%;display:block}
.guilloche{
  fill:none;
  stroke:var(--gold);
  stroke-width:.45;
  opacity:.9;
}
.seal-ring{fill:var(--paper);stroke:var(--gold);stroke-width:1.2}
.seal-legend{
  font-family:"Archivo",sans-serif;
  font-size:5.1px;
  letter-spacing:.24em;
  fill:var(--gold);
}
.drop{fill:var(--blood)}

/* ---- confirmation ---- */
.done{display:none;margin-top:2.3rem}
.is-done .done{display:block}
.is-done .askform{display:none}

.done h2{
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:500;
  font-size:1.9rem;
  line-height:1.05;
  margin:0 0 .6rem;
}
.done p{font-size:.93rem;margin:0 0 1.4rem}
.next{
  display:inline-block;
  width:100%;
  text-align:center;
  padding:.92rem 1rem;
  background:var(--blood);
  color:#fff;
  text-decoration:none;
  border:1px solid var(--blood);
  font-weight:600;
}
.next:hover{background:var(--blood-bright);color:#fff}

/* stamp: the one authored moment, user-triggered */
.is-done .seal{animation:stamp .5s cubic-bezier(.16,1,.3,1) both}
@keyframes stamp{
  0%{scale:2.3;opacity:0;filter:blur(7px)}
  60%{opacity:1}
  100%{scale:1;opacity:1;filter:blur(0)}
}

/* page-load: the guilloche draws itself, once */
.guilloche{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:ink 2.1s cubic-bezier(.22,1,.3,1) .15s both}
@keyframes ink{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .guilloche{stroke-dashoffset:0}
}

/* ---- VIP overprint: the same certificate, upgraded ---- */
.cert--vip{grid-template-columns:1.5fr 1fr}
.cert--vip::before{border-color:var(--gold)}
.cert--vip::after{border-color:var(--gold)}
.cert--vip .perf{border-left-color:var(--gold)}

.held{
  font-size:.82rem;
  color:var(--ink-soft);
  margin:0 0 1.5rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--rule);
}

.cert--vip h1{font-size:clamp(1.95rem,1rem + 3.9vw,4.3rem)}

.includes{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule)}
.includes li{
  display:grid;
  grid-template-columns:1.5rem 1fr;
  gap:.85rem;
  align-items:start;
  padding:.85rem .2rem;
  border-bottom:1px solid var(--rule);
  font-size:.97rem;
  line-height:1.45;
}
.includes svg{width:15px;height:15px;margin-top:.28em;fill:none;stroke:var(--gold);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

.bonus{
  margin-top:1.7rem;
  padding:1.3rem 1.4rem;
  border:1px solid var(--gold);
  background:rgba(217,182,92,.09);
}
.bonus h2{
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:500;
  font-size:1.32rem;
  line-height:1.15;
  margin:0 0 .4rem;
}
.bonus p{margin:0;font-size:.9rem;color:var(--ink-soft);max-width:52ch}
.bonus .worth{color:var(--ink);font-size:.86rem;margin-top:.6rem}

.price--vip .now{color:var(--blood)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#22190a}
.btn-gold:hover:not(:disabled){background:var(--gold-light);color:#22190a}
.btn-gold:active:not(:disabled){background:#8f7018;color:#fff}

.decline{
  display:block;
  width:100%;
  margin-top:1rem;
  text-align:center;
  font-size:.85rem;
  color:var(--ink-soft);
  text-decoration:underline;
}
.decline:hover{color:var(--blood)}

.demo-note{
  width:min(1180px,100%);
  margin:1.1rem auto 0;
  font-size:.76rem;
  color:var(--ink-soft);
  text-align:center;
}

/* ---- responsive ---- */
@media (max-width:860px){
  .cert,.cert--vip{grid-template-columns:1fr}
  .perf{display:none}
  .stub{
    border-top:2px dotted var(--blood);
    margin:0 22px;
    padding-left:clamp(1.2rem,4vw,2rem);
    padding-right:clamp(1.2rem,4vw,2rem);
    padding-bottom:clamp(2rem,6vw,3rem);
  }
  .cert--vip .stub{border-top-color:var(--gold)}
  .seal{
    position:relative;
    left:auto;bottom:auto;
    translate:none;
    margin:0 auto 1.2rem;
  }
  .face{padding-bottom:.6rem}
}