/* A quiet closing chapter, with the existing brand and original signup copy. */
html[data-concept="stoic"] main > #beta.beta-finale {
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 112px 32px 0;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, #fff 0%, rgb(255 255 255 / 94%) 25%, rgb(255 255 255 / 65%) 48%, transparent 100%),
    linear-gradient(90deg, #dfd0fc, #b99af4);
  overflow: hidden;
}
.beta-invitation {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #342b44;
}
html[data-concept="stoic"] #beta .beta-invitation h2 { font-weight: 600; }
.beta-invitation p {
  max-width: 36em;
  margin: 22px auto 0;
  font-size: var(--hero-body, 15px);
  line-height: 1.9;
  text-wrap: pretty;
  color: #544661;
}
.beta-invitation p > span { display: block; }
.beta-invitation .beta-keep { display: inline-block; white-space: nowrap; }
.beta-invitation .btn { margin-top: 28px; min-width: 176px; min-height: 52px; background: #30273e; box-shadow: none; }
.beta-invitation .btn:hover { background: #49375f; }
.beta-brand-scene {
  width: 100%;
  max-width: min(1600px, calc((100svh - 390px) * 4));
  height: clamp(220px, calc(100svh - 440px), 420px);
  container-type: inline-size;
  position: relative;
  flex: 0 0 auto;
  isolation: isolate;
}
.beta-outline { position: absolute; inset: auto 0 0; width: 100%; height: auto; overflow: visible; }
.beta-letter path {
  fill: transparent;
  stroke: #73538f;
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
  transition: stroke 350ms ease;
}
.beta-outline { pointer-events: none; }
.beta-brand-scene[data-cat-active="0"] .beta-letter-0 path,
.beta-brand-scene[data-cat-active="1"] .beta-letter-1 path,
.beta-brand-scene[data-cat-active="2"] .beta-letter-3 path,
.beta-brand-scene[data-cat-active="3"] .beta-letter-5 path { stroke: #73538f; }
html[data-concept="stoic"] .site-footer {
  min-height: 76px;
  padding: 18px 32px;
  border-top: none;
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, #dfd0fc, #b99af4);
  color: #453451;
  font-size: var(--hero-caption, 12px);
  display: flex;
  align-items: center;
}
html[data-concept="stoic"] .site-footer .wrap { width: 100%; max-width: 1600px; align-items: center; }
html[data-concept="stoic"] .site-footer .wrap > div { display: flex; gap: 18px; align-items: center; }
html[data-concept="stoic"] .site-footer .wordmark { font-size: 18px; color: #544661; }
html[data-concept="stoic"] .site-footer p { margin: 0; }
/* Draw the existing contours in place, then reveal their resident cats. */
.beta-finale[data-entry-ready] .beta-letter path { stroke-dasharray: 1 1; }
.beta-finale[data-entry-ready][data-entry-visible="false"] .beta-letter path { stroke-dasharray: 0 1; }
.beta-finale[data-entry-ready][data-entry-visible="false"] .beta-character { opacity: 0; }
@media (max-width: 900px) {
  html[data-concept="stoic"] main > #beta.beta-finale { min-height: 660px; padding: 112px 20px 0; gap: 88px; }
  .beta-invitation p { max-width: 32em; }
  .beta-brand-scene { width: calc(100% + 8px); height: auto; aspect-ratio: 1200 / 370; }
  html[data-concept="stoic"] .site-footer { padding: 22px 20px; }
  html[data-concept="stoic"] .site-footer .wrap { gap: 12px; }
}
@media (max-width: 520px) {
  html[data-concept="stoic"] main > #beta.beta-finale { min-height: 600px; padding-top: 112px; gap: 100px; }
  .beta-invitation p { max-width: 24em; margin-top: 20px; }
  .beta-invitation .btn { margin-top: 26px; }
  .beta-letter path { stroke-width: 1.25px; }
  html[data-concept="stoic"] .site-footer .wrap > div { gap: 12px; }
}
@media (max-height: 699px) and (min-width: 901px) {
  html[data-concept="stoic"] main > #beta.beta-finale { padding-top: 112px; }
  .beta-brand-scene { max-width: 1120px; }
}
@media (prefers-reduced-motion: reduce) {
  .beta-finale[data-entry-ready] .beta-letter path { stroke-dasharray: none !important; }
  .beta-finale[data-entry-ready] .beta-character { opacity: 1 !important; }
}


/* Each pose stays attached to its own supporting letter edge. */
.beta-character { pointer-events: visiblePainted; transform-box: fill-box; transition: transform 1100ms cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { .beta-brand-scene .beta-character { animation: none !important; transition: none !important; transform: none !important; } }

/* A faint surface grain only; foreground type and characters remain sharp. */
html[data-concept="stoic"] #beta.beta-finale::before,
html[data-concept="stoic"] .site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .8;
  pointer-events: none;
}