.event-flow { background: #f7f2ee; }
.event-flow .section-heading { max-width: 720px; margin-inline: auto; text-align: center; }
.event-flow .section-heading p { margin-inline: auto; }

.event-bento {
  display: grid;
  max-width: 1080px;
  margin-inline: auto;
  grid-template-columns: 1.12fr 1fr 1fr;
  grid-template-rows: 245px 245px;
  grid-template-areas:
    'day groups updates'
    'day content control';
  gap: 15px;
}

.event-bento-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  padding: 25px;
  display: flex;
  flex-direction: column;
}

.event-card-kicker { font-size: .66rem; font-weight: 800; letter-spacing: .16em; color: #8e6476; }
.event-bento-card h3 { margin: 9px 0 8px; font-size: clamp(1.45rem, 2vw, 1.95rem); }
.event-bento-card p { margin: 0; font-size: .88rem; line-height: 1.45; color: #64737c; }
.event-day { grid-area: day; background: #ead0c4; }
.event-day .event-card-kicker { color: #9e5e48; }
.event-day h3 { font-size: clamp(1.8rem, 2.7vw, 2.4rem); }
.event-day-preview {
  width: 100%;
  margin-top: 24px;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 13px 28px rgba(53, 64, 67, .14);
  transform: rotate(-2deg);
}

.event-day-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #e9ebeb; }
.event-day-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #dce6e3; color: #53766a; font-weight: 800; }
.event-day-top span:nth-child(2) { display: grid; gap: 2px; }
.event-day-top small { color: #8d9a9c; font-size: .55rem; font-weight: 800; letter-spacing: .1em; }
.event-day-top strong { font-size: .83rem; }
.event-day-date { margin-left: auto; color: #ac6549; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.event-day-label { margin: 17px 0 4px; color: #9a697c; font-size: .59rem; font-weight: 800; letter-spacing: .15em; }
.event-day-row { display: grid; grid-template-columns: 44px 1fr 9px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf0ef; }
.event-day-row:last-child { border: 0; }
.event-day-row time { color: #a86952; font-size: .77rem; font-weight: 800; }
.event-day-row span:nth-child(2) { display: grid; gap: 3px; }
.event-day-row strong { color: #2d424e; font-size: .83rem; }
.event-day-row small { color: #819198; font-size: .69rem; }
.event-day-dot { width: 8px; height: 8px; border-radius: 50%; background: #e1af95; }

.event-groups { grid-area: groups; background: #e4edea; }
.event-groups .event-card-kicker { color: #5d8274; }
.event-group-graphic { display: flex; align-items: center; margin: auto 0 13px; padding-left: 5px; }
.event-group-graphic span { display: grid; place-items: center; width: 52px; height: 52px; margin-left: -6px; border: 3px solid #e4edea; border-radius: 50%; background: #a3baae; color: #fff; font-size: 1.15rem; font-weight: 800; box-shadow: 0 4px 8px rgba(30, 50, 45, .1); }
.event-group-graphic span:nth-child(2) { background: #d6ac9c; }
.event-group-graphic span:nth-child(3) { background: #9eaeca; }
.event-group-graphic span:nth-child(4) { background: #fff; color: #5b7770; font-size: .9rem; }

.event-updates { grid-area: updates; background: #f3e6dc; }
.event-updates .event-card-kicker { color: #aa7655; }
.event-update-graphic { display: flex; align-items: center; gap: 8px; width: 100%; margin: auto 0 14px; padding: 11px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(49, 59, 64, .14); transform: rotate(3deg); }
.event-update-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; background: #334e5d; color: #fff; font: 1.3rem Georgia, serif; }
.event-update-graphic span:nth-child(2) { display: grid; min-width: 0; }
.event-update-graphic strong { font-size: .69rem; }
.event-update-graphic small { font-size: .58rem; line-height: 1.25; color: #63727b; }
.event-update-graphic time { align-self: flex-start; margin-left: auto; font-size: .55rem; color: #92a0a5; }

.event-content { grid-area: content; background: #ebe7f0; }
.event-content .event-card-kicker { color: #806e91; }
.event-content-graphic { display: grid; gap: 6px; width: 100%; margin: auto 0 12px; }
.event-content-graphic span { display: flex; align-items: center; gap: 9px; border-radius: 9px; padding: 7px 10px; background: #fff; color: #526274; font-size: .68rem; font-weight: 700; box-shadow: 0 3px 10px rgba(60, 53, 75, .08); }
.event-content-graphic i { width: 20px; color: #9d83af; font-size: 1rem; font-style: normal; text-align: center; }

.event-control { grid-area: control; background: #314b5a; color: #fff; }
.event-control .event-card-kicker { color: #f4b48e; }
.event-control p { color: #d4e1e7; }
.event-control-graphic { display: grid; gap: 6px; margin: auto 0 12px; }
.event-control-graphic span { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; background: #f8faf9; color: #445966; font-size: .65rem; font-weight: 700; }
.event-control-graphic i { width: 8px; height: 8px; border-radius: 50%; background: #86bba0; }
.event-control-graphic b { margin-left: auto; color: #5a8d75; font-size: .57rem; }

.event-pricing .org-pricing-main { background: #314b5a; }

@media (max-width: 800px) {
  .event-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 405px 235px 235px; grid-template-areas: 'day day' 'groups updates' 'content control'; }
  .event-day-preview { max-width: 490px; margin-inline: auto; }
}

@media (max-width: 480px) {
  .event-flow .section-heading { text-align: left; }
  .event-flow .section-heading p { margin-inline: 0; }
  .event-bento { grid-template-rows: 410px 225px 225px; gap: 10px; }
  .event-bento-card { border-radius: 17px; padding: 16px; }
  .event-bento-card h3 { font-size: 1.23rem; }
  .event-bento-card p { font-size: .72rem; }
  .event-card-kicker { font-size: .55rem; }
  .event-day h3 { font-size: 1.7rem; }
  .event-day-preview { margin-top: 20px; padding: 14px; }
  .event-group-graphic span { width: 35px; height: 35px; font-size: .83rem; border-width: 2px; }
  .event-group-graphic span:nth-child(4) { font-size: .67rem; }
  .event-update-graphic { padding: 8px; gap: 5px; }
  .event-update-icon { flex-basis: 25px; width: 25px; height: 25px; font-size: 1rem; }
  .event-update-graphic strong { font-size: .6rem; }
  .event-update-graphic small { font-size: .51rem; }
  .event-update-graphic time { display: none; }
  .event-content-graphic span { gap: 4px; padding: 6px; font-size: .57rem; }
  .event-control-graphic span { padding: 6px; font-size: .55rem; }
  .event-control-graphic b { font-size: .48rem; }
}