/* Confirmation layout; shared fonts, colors, texture and type scale come from
   an unchanged snapshot of the live executive coaching stylesheet. */
.confirmation-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
.confirmation-page::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: min(70vh, 680px);
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(228, 188, 112, 0.10) 0%, rgba(228, 188, 112, 0.03) 45%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}
.confirmation-header { padding-top: 40px; }
.confirmation-header .nav { margin-bottom: 0; }
.booking-status {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.confirmation-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding-block: clamp(64px, 9vh, 112px);
  text-align: center;
}
.confirmation-content { max-width: 700px; padding-bottom: 36px; }
.confirmation-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 30px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.confirmation-mark svg { width: 32px; height: 32px; }
.confirmation-content .h1 { margin-top: 22px; }
.confirmation-message {
  margin-top: 26px;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.7;
  color: var(--ink-lo);
}
.signature {
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--ink-mid);
}
.confirmation-footer {
  padding-block: 22px 26px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .confirmation-header { padding-top: 26px; }
  .confirmation-header .logo img { height: 28px; }
  .booking-status { font-size: 9px; letter-spacing: .08em; max-width: 80px; text-align: right; }
  .confirmation-main { padding-block: 60px; }
  .confirmation-content { padding-bottom: 12px; }
  .confirmation-content .h1 { font-size: clamp(38px, 10vw, 52px); }
  .confirmation-mark { width: 56px; height: 56px; margin-bottom: 26px; }
  .confirmation-content .eyebrow { font-size: 11px; }
  .confirmation-message { margin-top: 22px; }
}