:root{
  --brand-red:#c8102e;
  --brand-red-dark:#8f0b22;
  --ink:#121212;
  --text:#2d3748;
  --muted:#697386;
  --paper:#ffffff;
  --soft:#f7f7fa;
}

*{box-sizing:border-box;}

html,body{min-height:100%;}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 18%, rgba(200,16,46,.22), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(17,17,17,.12), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #f3f4f8 45%, #ffffff 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 85%);
}

.closing-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:clamp(1.2rem, 3vw, 3rem);
}

.closing-card{
  position:relative;
  width:min(920px, 100%);
  overflow:hidden;
  padding:clamp(1.6rem, 5vw, 4rem);
  border:1px solid rgba(17,17,17,.08);
  border-radius:2rem;
  background:rgba(255,255,255,.88);
  box-shadow:0 1.5rem 4rem rgba(17,17,17,.14);
  backdrop-filter:blur(16px);
}

.closing-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:8px;
  background:linear-gradient(90deg, var(--brand-red), var(--brand-red-dark), #111111);
}

.closing-card::after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-120px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(200,16,46,.16), transparent 68%);
  pointer-events:none;
}

.closing-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.52rem .82rem;
  border-radius:999px;
  background:rgba(200,16,46,.1);
  color:var(--brand-red);
  border:1px solid rgba(200,16,46,.14);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.closing-kicker{
  margin:2rem 0 .45rem;
  color:var(--brand-red);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

h1{
  margin:0;
  color:var(--ink);
  font-family:Merriweather, Georgia, serif;
  font-size:clamp(2.7rem, 8vw, 6rem);
  line-height:.96;
  letter-spacing:-.055em;
}

.closing-lead{
  max-width:760px;
  margin:1.45rem 0 0;
  color:#303846;
  font-size:clamp(1.1rem, 2.2vw, 1.45rem);
  line-height:1.6;
  font-weight:600;
}

.message-box{
  position:relative;
  z-index:1;
  max-width:820px;
  margin-top:2rem;
  padding:clamp(1rem, 3vw, 1.55rem);
  border-radius:1.35rem;
  background:linear-gradient(180deg, #ffffff 0%, var(--soft) 100%);
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 .8rem 1.8rem rgba(17,17,17,.06);
}

.message-box p{
  margin:0;
  font-size:1.02rem;
  line-height:1.72;
}

.message-box p + p{margin-top:1rem;}

.signature-block{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .8rem;
  align-items:center;
  justify-content:space-between;
  margin-top:1.45rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(17,17,17,.08);
  color:var(--muted);
}

.signature-block strong{
  color:var(--ink);
  font-weight:900;
}

@media (max-width:640px){
  .closing-card{border-radius:1.45rem;}
  .closing-kicker{margin-top:1.5rem;}
  .signature-block{display:block;}
  .signature-block strong{display:block; margin-top:.45rem;}
}
