.pause-invite,
.urgent-invite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(76px, 10vw, 150px) 7vw;
}

.pause-invite {
  min-height: 70svh;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: clamp(50px, 9vw, 150px);
  color: #f4f0e7;
  background:
    radial-gradient(circle at 18% 50%, rgba(229, 149, 23, .18), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(74, 55, 103, .34), transparent 34%),
    #11130f;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.pause-invite::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  z-index: -1;
  opacity: .34;
  background: repeating-radial-gradient(circle at 22% 50%, transparent 0 65px, rgba(255,195,66,.22) 66px 67px);
  mask-image: linear-gradient(90deg, #000, transparent 62%);
}

.pause-invite-visual {
  display: grid;
  justify-items: center;
  gap: 22px;
}

.pause-breath-ring {
  width: min(30vw, 390px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  position: relative;
  border: 1px solid rgba(255,195,66,.4);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,195,66,.045), 0 0 90px rgba(229,149,23,.12);
}

.pause-breath-ring::before,
.pause-breath-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}

.pause-breath-ring::before { inset: 14%; }
.pause-breath-ring::after { inset: 31%; }

.pause-breath-ring i {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: #e99b16;
  box-shadow: 0 0 45px rgba(233,155,22,.28);
  animation: invitation-breath 10s ease-in-out infinite;
}

.pause-breath-ring span {
  position: relative;
  z-index: 2;
  font: 300 clamp(48px, 6vw, 92px)/1 "Instrument Serif", serif;
}

.pause-breath-ring span:first-child { color: #f4f0e7; transform: translateX(18%); }
.pause-breath-ring span:last-child { color: #ffc342; transform: translateX(-18%); }
.pause-invite-visual small,
.pause-invite-actions span {
  font: 8px/1.55 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9ca098;
}

.pause-invite-copy .section-index,
.urgent-invite-copy .section-index {
  margin: 0 0 34px;
  font: 9px "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  color: #e99b16;
}

.pause-invite h2,
.urgent-invite h2 {
  margin: 0;
  max-width: 850px;
  font: 300 clamp(52px, 7.7vw, 118px)/.88 "Bricolage Grotesque", sans-serif;
  letter-spacing: -.075em;
}

.pause-invite h2 em,
.urgent-invite h2 em {
  display: block;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -.035em;
  color: #ffc342;
}

.pause-invite-copy > p:not(.section-index),
.urgent-invite-copy > p:not(.section-index) {
  max-width: 680px;
  margin: 34px 0;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.58;
  color: #c8cbc3;
}

.pause-invite-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;
}

.pause-invite-actions a,
.urgent-invite-copy > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  min-width: min(100%, 350px);
  padding: 19px 21px;
  border: 1px solid #e99b16;
  color: inherit;
  text-decoration: none;
  font: 9px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.pause-invite-actions a:hover,
.urgent-invite-copy > a:hover { background: #e99b16; color: #11130f; transform: translateY(-2px); }

.urgent-invite {
  min-height: 62svh;
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  align-items: center;
  gap: clamp(50px, 9vw, 150px);
  background:
    radial-gradient(circle at 12% 50%, rgba(233,155,22,.18), transparent 25%),
    linear-gradient(120deg, #ede8dc, #f6f1e8 64%, #e9e1d0);
  color: #11130f;
}

.urgent-invite::after {
  content: "";
  position: absolute;
  right: -8vw;
  top: -10vw;
  width: 38vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(49,41,77,.15);
  box-shadow: 0 0 0 6vw rgba(49,41,77,.025), 0 0 0 calc(6vw + 1px) rgba(49,41,77,.1);
  pointer-events: none;
}

.urgent-signal {
  width: min(26vw, 330px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(17,19,15,.3);
  background: #11130f;
  color: #f4f0e7;
  box-shadow: 22px 22px 0 rgba(233,155,22,.22);
}

.urgent-signal span { font: 300 clamp(58px, 8vw, 118px)/.75 "Instrument Serif", serif; color: #ffc342; }
.urgent-signal small { max-width: 125px; font: 8px/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.urgent-invite h2 em { color: #31294d; }
.urgent-invite-copy > p:not(.section-index) { color: #45473f; }

@keyframes invitation-breath {
  0%,100% { transform: scale(.76); opacity: .58; }
  40% { transform: scale(1); opacity: .95; }
}

@media (max-width: 760px) {
  .pause-invite,
  .urgent-invite { grid-template-columns: 1fr; padding: 88px 20px; gap: 62px; }
  .pause-invite-visual { order: 2; }
  .pause-breath-ring { width: min(76vw, 340px); }
  .urgent-signal { width: min(68vw, 300px); justify-self: center; }
  .pause-invite h2,
  .urgent-invite h2 { font-size: clamp(52px, 17vw, 78px); }
  .pause-invite-actions { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .pause-breath-ring i { animation: none; }
}