#hero .home-personas { --persona-ink: #24332f; width: 100%; margin: 0 0 64px; padding: 64px 24px 40px; background-color: #fff; color: var(--persona-ink); overflow: hidden; transition: background-color 900ms cubic-bezier(.4, 0, .2, 1), color 450ms ease; }
#hero .home-personas.is-color-active { background-color: var(--persona-background, #88b9d6); }
#hero .home-personas.is-color-active:not(.is-light) { --persona-ink: #fff; }
#hero .home-personas[hidden] { display: none; }
#hero .home-personas-heading { text-align: center; }
#hero .home-personas-heading h2 { margin: 0; color: inherit; font-size: 44px; font-weight: 400; line-height: 1.1; }
.home-personas-stage { position: relative; max-width: 1180px; margin: 0 auto; }
.home-personas-fan { position: relative; height: 425px; margin-top: 42px; touch-action: pan-y; }
#hero .home-persona { position: absolute; top: 0; left: 50%; display: block; width: 240px; margin: 0 0 0 -120px; padding: 6px; border: 0; border-radius: 16px; background: #fff; color: #252525; box-shadow: 0 5px 16px #00448314; transform: translateX(calc(var(--slot) * 190px)) translateY(var(--drop)) rotate(var(--angle)) scale(var(--scale)); transform-origin: center 80%; transition: transform 350ms cubic-bezier(.22, 1, .36, 1); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
#hero .home-persona > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 11px; pointer-events: none; }
#hero .home-persona-question { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; border-radius: 11px; background: #d8e8e5; color: #386557; font-size: 160px; line-height: 1; font-weight: 400; }
#hero .home-persona-name { display: grid; place-items: center; height: 42px; font-size: 18px; font-weight: 400; }
#hero .home-persona:focus-visible { outline: 3px solid #172b3f; outline-offset: 4px; }
.home-personas-arrows { display: flex; justify-content: center; gap: 8px; margin: -8px 0 26px; }
#hero .home-personas-arrows button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid currentColor; color: inherit; border-radius: 50%; background: transparent; }
.home-personas-arrows img { filter: none; }
.home-personas.is-color-active:not(.is-light) .home-personas-arrows img { filter: brightness(0) invert(1); }
.home-personas-arrows [data-persona-prev] img { transform: rotate(180deg); }
#hero .home-personas-arrows button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.home-personas-detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; }
#hero .home-persona-bio { position: relative; grid-column: 1 / 8; min-width: 0; padding: 24px 28px; border-radius: 8px; background: #fff; color: #252525; text-align: left; }
#hero .home-persona-bio::before, .home-persona-response::before { content: ""; position: absolute; top: 26px; width: 16px; height: 20px; background: inherit; }
#hero .home-persona-bio::before { left: -12px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.home-persona-response::before { right: -12px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.home-persona-sender { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.home-persona-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.home-persona-avatar-question { display: grid; place-items: center; background: #d8e8e5; color: #386557; font-size: 28px; }
#hero .home-persona-bio h3 { margin: 0 0 3px; color: #252525; font-size: 17px; font-weight: 500; line-height: 1.25; }
#hero .home-persona-role { margin: 0; color: #73787c; font-size: 14px; line-height: 1.3; }
#hero .home-persona-story { position: relative; margin: 0; color: #252525; font-size: 20px; line-height: 1.45; }
.home-persona-reserve { visibility: hidden; }
.home-persona-typed { position: absolute; inset: 0; }
.home-persona-story.is-typing .home-persona-typed::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: #087ff5; vertical-align: -.1em; }
.home-persona-response { position: relative; grid-column: 4 / -1; min-width: 0; padding: 24px 28px 6px; border-radius: 8px; background: color-mix(in srgb, var(--persona-background) 12%, #fff); color: #252525; }
.home-persona-responder { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.home-persona-responder > img { width: 32px; height: 32px; flex-shrink: 0; }
#hero .home-persona-brand { display: block; margin-bottom: 3px; font-size: 14px; color: #63766b; }
#hero .home-persona-responder h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 400; color: #24362b; }
#hero .home-persona-benefits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
#hero .home-persona-benefits li { min-width: 0; border-top: 1px solid #d3e3d9; }
#hero .home-persona-benefit { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; min-height: 122px; align-items: start; padding: 20px 0; color: #252525; text-decoration: none; }
#hero .home-persona-value { display: block; font-size: 24px; font-weight: 500; line-height: 1.2; color: #176a47; }
#hero .home-persona-benefit h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #252525; font-size: 17px; font-weight: 500; line-height: 1.3; }
.home-persona-link-icon { flex-shrink: 0; margin-left: auto; filter: none; }
#hero .home-persona-benefit p { margin: 0; color: #626f67; font-size: 14px; line-height: 1.4; }
#hero .home-persona-benefit:focus-visible { outline: 2px solid #176a47; outline-offset: 5px; }
.home-personas-detail .is-pending { visibility: hidden; }
#hero .home-persona-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #d3e3d9; padding: 20px 0; color: #176a47; font-size: 16px; font-weight: 500; text-decoration: none; }
.home-persona-more img { flex-shrink: 0; }
#hero .home-persona-invitation { padding: 4px 0 22px; }
#hero .home-persona-invitation p { max-width: 520px; margin: 0 0 22px; color: #46574e; font-size: 20px; line-height: 1.45; }
#hero .home-persona-more:focus-visible { outline: 2px solid #176a47; outline-offset: 4px; }
.home-personas-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.home-personas-footer { display: flex; justify-content: space-between; align-items: center; gap: 28px; max-width: 1140px; margin: 28px auto 0; }
#hero .home-personas-footer p { max-width: 620px; margin: 0; color: inherit; font-size: 13px; line-height: 1.5; }
#hero .home-personas-cta { flex-shrink: 0; min-height: 48px; padding: 14px 22px; border: 0; border-radius: 6px; background: #202124; color: #fff; font-size: 15px; font-weight: 400; }
#hero .home-personas[data-persona="you"] .home-personas-footer .home-personas-cta { display: none; }
#hero .home-personas.is-instant, #hero .home-personas.is-instant .home-persona { transition: none; }
@media (hover: hover) and (pointer: fine) {
  #hero .home-personas-arrows button:hover { background: #ffffff24; }
  #hero .home-persona-benefit:hover h4 { text-decoration: underline; text-underline-offset: 4px; }
  #hero .home-persona-more:hover { text-decoration: underline; text-underline-offset: 4px; }
  #hero .home-personas-cta:hover { background: #343638; }
}
@media (max-width: 1100px) {
  #hero .home-persona { width: 210px; margin-left: -105px; transform: translateX(calc(var(--slot) * 150px)) translateY(var(--drop)) rotate(var(--angle)) scale(var(--scale)); }
  .home-personas-fan { height: 390px; }
  #hero .home-persona-bio { grid-column: 1 / 9; }
  .home-persona-response { grid-column: 3 / -1; }
  #hero .home-persona-benefit { grid-template-columns: 160px minmax(0, 1fr); gap: 16px; }
  #hero .home-persona-value { font-size: 22px; }
}
@media (max-width: 760px) {
  #hero .home-personas { padding: 40px 20px 32px; margin-bottom: 40px; }
  #hero .home-personas-heading h2 { font-size: 32px; }
  .home-personas-stage { margin-inline: -20px; }
  .home-personas-fan { height: 306px; margin-top: 32px; }
  #hero .home-persona { width: 174px; margin-left: -87px; padding: 5px; border-radius: 12px; transform: translateX(calc(var(--slot) * 114px)) translateY(var(--drop)) rotate(var(--angle)) scale(var(--scale)); }
  #hero .home-persona > img { border-radius: 8px; }
  #hero .home-persona-question { border-radius: 8px; font-size: 116px; }
  #hero .home-persona-name { height: 34px; font-size: 16px; }
  .home-personas-arrows { margin-bottom: 22px; }
  .home-personas-detail { gap: 16px; }
  #hero .home-persona-bio { grid-column: 1 / -1; margin-right: 14px; padding: 20px; }
  #hero .home-persona-bio h3 { font-size: 16px; }
  #hero .home-persona-role { font-size: 13px; }
  #hero .home-persona-story { font-size: 17px; }
  .home-persona-response { grid-column: 1 / -1; margin-left: 14px; padding: 20px 20px 0; }
  #hero .home-persona-responder h3 { font-size: 16px; }
  #hero .home-persona-benefit { grid-template-columns: minmax(0, 1fr); min-height: 165px; gap: 10px; padding: 18px 0; }
  #hero .home-persona-value { font-size: 24px; }
  #hero .home-persona-benefit h4 { font-size: 16px; }
  #hero .home-persona-invitation p { font-size: 17px; }
  .home-personas-footer { flex-direction: column-reverse; align-items: stretch; gap: 20px; margin-top: 16px; }
  #hero .home-personas-footer p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #hero .home-personas, #hero .home-persona { transition: none; }
}