/* ChimeBuddy homepage additions: events showcase, safety visual, and final CTA. */

.cb-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .55rem;
  color: #0f8f88;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cb-events-heading h2,
.cb-safety-copy h2,
.cb-final-cta-copy h2 {
  margin: 0 0 .55rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.cb-events-heading p,
.cb-safety-copy p,
.cb-final-cta-copy p {
  color: var(--cb-muted, #5f7191);
}

/* Events */
.cb-events-showcase {
  margin-top: 1.35rem;
  padding: clamp(1.35rem, 3vw, 2.35rem);
  border: 1px solid #d9e7f2;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 219, 188, .58), transparent 26%),
    linear-gradient(145deg, #f7fcff 0%, #ffffff 54%, #fff8f2 100%);
  box-shadow: 0 14px 34px rgba(20, 55, 91, .08);
}

.cb-events-heading {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.cb-events-heading p {
  max-width: 680px;
  margin: 0 auto;
}

.cb-events-gallery {
  display: grid;
  grid-template-columns: .86fr .86fr 1.42fr;
  gap: 1rem;
  align-items: stretch;
}

.cb-event-preview {
  min-width: 0;
  padding: .85rem;
  border: 1px solid #e1e7ee;
  border-radius: 19px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px rgba(27, 55, 85, .07);
}

.cb-preview-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 58px;
  margin-bottom: .75rem;
}

.cb-preview-label > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #eaf3ff;
  color: #123766;
  font-weight: 900;
}

.cb-event-preview--reminders .cb-preview-label > span {
  background: #fff0e4;
  color: #b55e26;
}

.cb-event-preview--staff .cb-preview-label > span {
  background: #e8f8f3;
  color: #177a64;
}

.cb-preview-label strong,
.cb-preview-label small {
  display: block;
}

.cb-preview-label strong {
  color: #102f59;
  font-size: .94rem;
  line-height: 1.22;
}

.cb-preview-label small {
  margin-top: .16rem;
  color: #667b94;
  font-size: .76rem;
  line-height: 1.3;
}

.cb-preview-window {
  overflow: hidden;
  border: 1px solid #dfe5ec;
  border-radius: 15px;
  background: #fff;
}

.cb-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid #e8ebef;
  background: #f7f9fb;
}

.cb-preview-toolbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5df;
}

.cb-preview-window img {
  display: block;
  width: 100%;
  background: #fff;
}

.cb-preview-window--portrait img {
  aspect-ratio: 4 / 5.35;
  object-fit: cover;
  object-position: top center;
}

.cb-preview-window--wide img {
  aspect-ratio: 1.63 / 1;
  object-fit: cover;
  object-position: center;
}

.cb-events-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}

.cb-events-benefits > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .65rem .8rem;
  border: 1px solid #deebf2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  color: #294b73;
  font-size: .84rem;
  text-align: center;
}

.cb-events-benefits span {
  color: #0f9f88;
  font-weight: 900;
}

/* Safety */
.cb-safety {
  display: grid;
  grid-template-columns: 1.08fr 1.1fr .82fr;
  gap: clamp(1rem, 2.8vw, 2rem);
  align-items: center;
  margin-top: 1.35rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #ccebf0;
  border-radius: 24px;
  background: linear-gradient(135deg, #ecfbfd 0%, #f7fdff 58%, #ffffff 100%);
  box-shadow: 0 14px 32px rgba(28, 91, 102, .08);
}

.cb-safety-map {
  position: relative;
  min-height: 275px;
  overflow: hidden;
  border: 1px solid #d1e5ea;
  border-radius: 21px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.72) 1px, transparent 1px) 0 0/38px 38px,
    linear-gradient(rgba(255,255,255,.72) 1px, transparent 1px) 0 0/38px 38px,
    linear-gradient(145deg, #dff4ef, #e8f5ff);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .44);
}

.cb-safety-road {
  position: absolute;
  width: 125%;
  height: 38px;
  border: 10px solid rgba(255,255,255,.86);
  border-left: 0;
  border-right: 0;
  transform: rotate(-22deg);
}

.cb-safety-road--one { left: -14%; top: 40%; }
.cb-safety-road--two { left: -20%; top: 71%; transform: rotate(19deg); opacity: .72; }

.cb-safety-boundary {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 164px;
  height: 164px;
  border: 3px dashed #15a28f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 10px rgba(21, 162, 143, .10);
}

.cb-safety-facility {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border: 1px solid #d3e3e8;
  border-radius: 24px;
  background: #fff;
  color: #123766;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 26px rgba(33, 83, 98, .16);
}

.cb-safety-building {
  display: block;
  width: 46px;
  height: 46px;
  color: #127b73;
}

.cb-safety-building svg { width: 100%; height: 100%; }
.cb-safety-facility strong { margin-top: -9px; font-size: .78rem; }

.cb-safety-alert {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 132px;
  padding: .62rem .7rem;
  border: 1px solid #dae5e9;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(22, 65, 82, .13);
}

.cb-safety-alert > span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border-radius: 50%;
  background: #dcf7eb;
  color: #08745d;
  font-weight: 900;
}

.cb-safety-alert strong,
.cb-safety-alert small { display: block; }
.cb-safety-alert strong { color: #183b62; font-size: .78rem; }
.cb-safety-alert small { margin-top: .08rem; color: #718195; font-size: .66rem; }
.cb-safety-alert--arrival { left: 12px; top: 18px; }
.cb-safety-alert--departure { right: 12px; bottom: 20px; }
.cb-safety-alert--departure > span { background: #fff0e5; color: #bd642e; }

.cb-safety-privacy {
  position: absolute;
  right: 14px;
  top: 19px;
  z-index: 3;
  padding: .45rem .65rem;
  border: 1px solid #dbe5ec;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #405a77;
  font-size: .69rem;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(32, 70, 88, .09);
}

.cb-safety-copy p { margin-bottom: 0; }

.cb-safety-list {
  padding: 1rem;
  border: 1px solid #dce9ee;
  border-radius: 17px;
  background: rgba(255, 255, 255, .84);
}

.cb-safety-list .check-list { margin: 0; }

/* Final CTA */
.cb-final-cta {
  display: grid;
  grid-template-columns: .9fr 1.35fr auto;
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: center;
  padding: clamp(1.3rem, 3vw, 2.1rem);
  border: 1px solid #cfe4f4;
  border-radius: 24px;
  background:
    radial-gradient(circle at 9% 22%, rgba(157, 220, 255, .28), transparent 30%),
    linear-gradient(135deg, #f0faff 0%, #eaf5ff 100%);
  box-shadow: 0 14px 32px rgba(20, 67, 111, .09);
}

.cb-cta-visual {
  display: flex;
  justify-content: center;
}

.cb-cta-mini-board {
  width: min(100%, 250px);
  padding: .8rem;
  border: 1px solid #d8e4ee;
  border-radius: 19px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 24px rgba(25, 64, 102, .12);
  transform: rotate(-2deg);
}

.cb-cta-mini-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .7rem;
  color: #143a69;
  font-size: .8rem;
}

.cb-cta-mini-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffc54d;
  box-shadow: 0 0 0 4px #fff3c9;
}

.cb-cta-module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}

.cb-cta-module {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 50px;
  padding: .55rem;
  border: 1px solid #e3eaf0;
  border-radius: 12px;
  background: #f9fcff;
  color: #25466d;
  font-size: .7rem;
  font-weight: 800;
}

.cb-cta-module-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 50%;
  background: #e8f5ff;
}

.cb-cta-module:nth-child(2) .cb-cta-module-icon { background: #fff0e4; }
.cb-cta-module:nth-child(3) .cb-cta-module-icon { background: #f0eaff; }
.cb-cta-module:nth-child(4) .cb-cta-module-icon { background: #e8f8ef; }
.cb-cta-module-icon svg { width: 16px; height: 16px; }

.cb-final-cta-copy p { margin: 0; }
.cb-final-cta-action { text-align: center; }
.cb-final-cta-action .btn { white-space: nowrap; }

@media (max-width: 980px) {
  .cb-events-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cb-event-preview--staff { grid-column: 1 / -1; }
  .cb-preview-window--wide img { aspect-ratio: 2 / 1; }

  .cb-safety {
    grid-template-columns: 1fr 1fr;
  }

  .cb-safety-list { grid-column: 1 / -1; }

  .cb-final-cta {
    grid-template-columns: .8fr 1.2fr;
  }

  .cb-final-cta-action {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .cb-events-showcase,
  .cb-safety,
  .cb-final-cta {
    border-radius: 19px;
  }

  .cb-events-gallery,
  .cb-events-benefits,
  .cb-safety,
  .cb-final-cta {
    grid-template-columns: 1fr;
  }

  .cb-event-preview--staff,
  .cb-safety-list,
  .cb-final-cta-action {
    grid-column: auto;
  }

  .cb-preview-window--portrait img,
  .cb-preview-window--wide img {
    aspect-ratio: 1.2 / 1;
  }

  .cb-safety-copy { order: -1; }
  .cb-safety-map { min-height: 250px; }
  .cb-final-cta { text-align: center; }
  .cb-final-cta-copy { max-width: 520px; margin: 0 auto; }
}

/* Visitor Check-In CTA */
.cb-visitor-checkin {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(1.35rem, 3.2vw, 2.6rem);
  align-items: center;
  margin-top: 1.35rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid #d8e5f1;
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 219, 151, .22), transparent 28%),
    linear-gradient(135deg, #fffdf8 0%, #f5fbff 56%, #edf8ff 100%);
  box-shadow: 0 14px 34px rgba(20, 55, 91, .08);
}

.cb-visitor-visual {
  position: relative;
  min-height: 410px;
  padding: .35rem 4.2rem 1rem 0;
}

.cb-visitor-browser {
  height: 390px;
  overflow: hidden;
  border: 1px solid #d9e3ed;
  border-radius: 19px;
  background: #f4f7fb;
  box-shadow: 0 16px 32px rgba(27, 61, 96, .12);
  transform: rotate(-1deg);
}

.cb-visitor-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 .75rem;
  border-bottom: 1px solid #e3e9ef;
  background: rgba(255, 255, 255, .96);
}

.cb-visitor-browser-bar > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9d4df;
}

.cb-visitor-browser-bar strong {
  margin-left: .35rem;
  color: #536b87;
  font-size: .7rem;
  font-weight: 800;
}

.cb-visitor-browser img {
  display: block;
  width: 100%;
  height: calc(100% - 34px);
  object-fit: cover;
  object-position: top center;
}

.cb-visitor-ticket {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(43%, 230px);
  padding: .42rem;
  border: 1px solid #e2d8c8;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(50, 60, 72, .2);
  transform: rotate(2.5deg);
}

.cb-visitor-ticket-label {
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .35rem;
  width: max-content;
  padding: .45rem .7rem;
  border: 1px solid #bfe7d2;
  border-radius: 999px;
  background: #f0fff7;
  color: #176d4a;
  font-size: .69rem;
  font-weight: 900;
  transform: translateX(-50%);
  box-shadow: 0 8px 18px rgba(27, 102, 71, .12);
}

.cb-visitor-ticket-label span {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: #2fa76c;
  color: #fff;
}

.cb-visitor-ticket img {
  display: block;
  width: 100%;
  height: 292px;
  object-fit: cover;
  object-position: top center;
  border-radius: 16px;
}

.cb-visitor-copy h2 {
  margin: 0 0 .6rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.cb-visitor-copy > p {
  margin: 0;
  color: var(--cb-muted, #5f7191);
}

.cb-visitor-benefits {
  margin: 1.15rem 0 1.35rem;
  gap: .68rem;
}

.cb-visitor-copy .btn {
  display: inline-flex;
  text-align: center;
}

@media (max-width: 980px) {
  .cb-visitor-checkin {
    grid-template-columns: 1fr;
  }

  .cb-visitor-visual {
    width: min(100%, 760px);
    margin: 0 auto;
  }
}

@media (max-width: 680px) {
  .cb-visitor-checkin {
    border-radius: 19px;
  }

  .cb-visitor-visual {
    min-height: 330px;
    padding: 0 2.1rem .75rem 0;
  }

  .cb-visitor-browser {
    height: 305px;
  }

  .cb-visitor-ticket {
    width: min(45%, 175px);
  }

  .cb-visitor-ticket img {
    height: 215px;
  }

  .cb-visitor-ticket-label {
    font-size: .58rem;
  }

  .cb-visitor-copy {
    text-align: left;
  }

  .cb-visitor-copy .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Amenity Reservations feature showcase */
.cb-section-kicker--gold {
  color: #9a731d;
}

.cb-amenities-showcase {
  position: relative;
  margin-top: 1.35rem;
  padding: clamp(1.35rem, 3.3vw, 2.5rem);
  overflow: hidden;
  border: 1px solid #e6dcc9;
  border-radius: 26px;
  background:
    radial-gradient(circle at 6% 7%, rgba(210, 166, 68, .17), transparent 27%),
    radial-gradient(circle at 94% 34%, rgba(32, 161, 148, .10), transparent 26%),
    linear-gradient(145deg, #fffcf7 0%, #f8f4ec 48%, #f4fbfc 100%);
  box-shadow: 0 16px 38px rgba(51, 61, 77, .09);
}

.cb-amenities-showcase::before,
.cb-amenities-showcase::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cb-amenities-showcase::before {
  width: 260px;
  height: 260px;
  right: -145px;
  top: -130px;
  border: 34px solid rgba(197, 153, 55, .08);
}

.cb-amenities-showcase::after {
  width: 190px;
  height: 190px;
  left: -110px;
  bottom: 70px;
  border: 28px solid rgba(15, 143, 136, .06);
}

.cb-amenities-heading {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto 1.15rem;
  text-align: center;
}

.cb-amenities-heading h2 {
  margin: 0 0 .65rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(31px, 3.25vw, 44px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.cb-amenities-heading p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--cb-muted, #5f7191);
}

.cb-amenities-chip-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-bottom: 1.4rem;
}

.cb-amenities-chip-row > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .5rem .75rem;
  border: 1px solid #e3d8c4;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  color: #52647b;
  font-size: .78rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(60, 65, 74, .05);
}

.cb-amenities-chip-row svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #b58a2b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cb-amenities-resident-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(330px, .94fr);
  gap: clamp(1.3rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid rgba(222, 209, 188, .92);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.cb-amenities-phone-stage {
  position: relative;
  min-height: 535px;
  padding: 22px 24px 18px;
  isolation: isolate;
}

.cb-amenities-glow {
  position: absolute;
  inset: 12% 7% 8% 6%;
  z-index: -1;
  border-radius: 44% 56% 48% 52%;
  background:
    radial-gradient(circle at 38% 36%, rgba(217, 180, 94, .38), transparent 40%),
    linear-gradient(145deg, rgba(223, 240, 237, .92), rgba(250, 240, 220, .88));
  filter: blur(2px);
  transform: rotate(-4deg);
}

.cb-amenities-phone,
.cb-amenities-reservation-card {
  margin: 0;
}

.cb-amenities-phone {
  position: absolute;
  overflow: hidden;
  border: 7px solid #18202a;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 24px 44px rgba(35, 42, 51, .21);
}

.cb-amenities-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 27px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  pointer-events: none;
}

.cb-amenities-phone-speaker {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 3;
  width: 58px;
  height: 15px;
  border-radius: 999px;
  background: #18202a;
  transform: translateX(-50%);
}

.cb-amenities-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cb-amenities-phone--browse {
  left: 2%;
  top: 28px;
  z-index: 2;
  width: min(255px, 43%);
  aspect-ratio: 414 / 896;
  transform: rotate(-4deg);
}

.cb-amenities-phone--detail {
  right: 7%;
  top: 4px;
  z-index: 1;
  width: min(245px, 41%);
  aspect-ratio: 414 / 896;
  transform: rotate(4deg);
}

.cb-amenities-reservation-card {
  position: absolute;
  right: 0;
  bottom: 2px;
  z-index: 4;
  width: min(335px, 58%);
  padding: .45rem;
  border: 1px solid #dfd1b8;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 38px rgba(49, 52, 58, .22);
  transform: rotate(-1.5deg);
}

.cb-amenities-reservation-card img {
  display: block;
  width: 100%;
  border-radius: 15px;
}

.cb-amenities-card-label {
  position: absolute;
  top: -16px;
  right: 17px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .44rem .67rem;
  border: 1px solid #bee1cf;
  border-radius: 999px;
  background: #effaf4;
  color: #287253;
  font-size: .68rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(39, 108, 78, .13);
}

.cb-amenities-card-label span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #3c9b70;
  color: #fff;
}

.cb-amenities-audience {
  display: inline-flex;
  align-items: center;
  margin-bottom: .45rem;
  padding: .36rem .62rem;
  border-radius: 999px;
  background: #f5ead3;
  color: #8b681d;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cb-amenities-audience--staff {
  background: #e7f4ff;
  color: #14528d;
}

.cb-amenities-resident-copy h3,
.cb-amenities-admin-copy h3 {
  margin: 0 0 .55rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(25px, 2.45vw, 34px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.cb-amenities-resident-copy > p,
.cb-amenities-admin-copy > p {
  margin: 0;
  color: var(--cb-muted, #5f7191);
}

.cb-amenities-steps {
  position: relative;
  display: grid;
  gap: .65rem;
  margin-top: 1.1rem;
}

.cb-amenities-steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 35px;
  bottom: 35px;
  width: 2px;
  background: linear-gradient(#d4b66b, #78b8ad);
}

.cb-amenities-steps article {
  position: relative;
  display: grid;
  grid-template-columns: 35px 42px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-height: 66px;
  padding: .55rem .65rem .55rem .15rem;
  border: 1px solid #e8e1d5;
  border-radius: 15px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 7px 16px rgba(52, 61, 72, .05);
}

.cb-amenities-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #c49a3c;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 0 0 1px #e2cfaa;
}

.cb-amenities-steps article:nth-child(2) .cb-amenities-step-number {
  background: #719f9a;
}

.cb-amenities-steps article:nth-child(3) .cb-amenities-step-number {
  background: #3a8f70;
}

.cb-amenities-step-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #faf3e4;
  color: #a67d24;
}

.cb-amenities-steps article:nth-child(2) .cb-amenities-step-icon {
  background: #ecf7f5;
  color: #397e75;
}

.cb-amenities-steps article:nth-child(3) .cb-amenities-step-icon {
  background: #eaf7f0;
  color: #267154;
}

.cb-amenities-step-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cb-amenities-steps strong,
.cb-amenities-steps small {
  display: block;
}

.cb-amenities-steps strong {
  color: #17345d;
  font-size: .91rem;
}

.cb-amenities-steps small {
  margin-top: .08rem;
  color: #6a7b91;
  font-size: .74rem;
  line-height: 1.35;
}

.cb-amenities-benefits {
  gap: .55rem;
  margin-top: 1rem;
  font-size: .87rem;
}

.cb-amenities-admin-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr);
  gap: clamp(1.2rem, 2.8vw, 2.2rem);
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1rem, 2.3vw, 1.55rem);
  border: 1px solid #d9e3ec;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(246, 250, 254, .96), rgba(255, 255, 255, .88));
}

.cb-amenities-admin-browser {
  overflow: hidden;
  border: 1px solid #d9e1e9;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(29, 55, 84, .14);
  transform: rotate(-.45deg);
}

.cb-amenities-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 .75rem;
  border-bottom: 1px solid #e5e9ee;
  background: #f7f9fb;
}

.cb-amenities-browser-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd4dd;
}

.cb-amenities-browser-bar strong {
  margin-left: .35rem;
  color: #536b84;
  font-size: .68rem;
  font-weight: 850;
}

.cb-amenities-admin-browser img {
  display: block;
  width: 100%;
  aspect-ratio: 1258 / 626;
  object-fit: cover;
  object-position: center;
}

.cb-amenities-admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 1rem 0 1.15rem;
}

.cb-amenities-admin-actions span {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-height: 43px;
  padding: .55rem .65rem;
  border: 1px solid #dbe5ed;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: #34506f;
  font-size: .76rem;
  font-weight: 800;
}

.cb-amenities-admin-actions b {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: #eaf4ff;
  color: #2468aa;
  font-size: .75rem;
}

.cb-amenities-admin-copy .btn {
  white-space: normal;
  text-align: center;
}

@media (max-width: 1050px) {
  .cb-amenities-resident-grid,
  .cb-amenities-admin-grid {
    grid-template-columns: 1fr;
  }

  .cb-amenities-phone-stage {
    width: min(100%, 760px);
    min-height: 555px;
    margin: 0 auto;
  }

  .cb-amenities-resident-copy,
  .cb-amenities-admin-copy {
    max-width: 760px;
    margin: 0 auto;
  }

  .cb-amenities-admin-browser {
    width: min(100%, 860px);
    margin: 0 auto;
  }
}

@media (max-width: 680px) {
  .cb-amenities-showcase {
    padding: 1rem;
    border-radius: 19px;
  }

  .cb-amenities-heading {
    text-align: left;
  }

  .cb-amenities-chip-row {
    justify-content: flex-start;
  }

  .cb-amenities-chip-row > span {
    width: 100%;
    border-radius: 13px;
  }

  .cb-amenities-resident-grid,
  .cb-amenities-admin-grid {
    padding: .85rem;
    border-radius: 17px;
  }

  .cb-amenities-phone-stage {
    min-height: 410px;
    padding: 10px 4px 10px;
  }

  .cb-amenities-phone {
    border-width: 5px;
    border-radius: 26px;
  }

  .cb-amenities-phone::after {
    border-radius: 21px;
  }

  .cb-amenities-phone-speaker {
    top: 4px;
    width: 44px;
    height: 11px;
  }

  .cb-amenities-phone--browse {
    left: 0;
    top: 18px;
    width: 47%;
  }

  .cb-amenities-phone--detail {
    right: 0;
    top: 2px;
    width: 45%;
  }

  .cb-amenities-reservation-card {
    right: 4%;
    bottom: 1px;
    width: 62%;
    border-radius: 15px;
  }

  .cb-amenities-reservation-card img {
    border-radius: 11px;
  }

  .cb-amenities-card-label {
    top: -13px;
    right: 8px;
    font-size: .57rem;
  }

  .cb-amenities-steps article {
    grid-template-columns: 31px 38px minmax(0, 1fr);
    padding-right: .45rem;
  }

  .cb-amenities-step-number {
    width: 31px;
    height: 31px;
  }

  .cb-amenities-steps::before {
    left: 15px;
  }

  .cb-amenities-step-icon {
    width: 38px;
    height: 38px;
  }

  .cb-amenities-admin-actions {
    grid-template-columns: 1fr;
  }

  .cb-amenities-admin-copy .btn {
    width: 100%;
  }
}

/* Dining Reservations feature showcase */
.cb-section-kicker--copper {
  color: #b16a2f;
}

.cb-dining-showcase {
  position: relative;
  margin-top: 1.35rem;
  padding: clamp(1.35rem, 3.3vw, 2.5rem);
  overflow: hidden;
  border: 1px solid #eadbcf;
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 12%, rgba(193, 128, 70, .14), transparent 28%),
    radial-gradient(circle at 92% 22%, rgba(196, 169, 83, .13), transparent 24%),
    linear-gradient(145deg, #fffdf8 0%, #fbf3ec 52%, #f7fbfc 100%);
  box-shadow: 0 16px 38px rgba(51, 61, 77, .09);
}

.cb-dining-showcase::before,
.cb-dining-showcase::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cb-dining-showcase::before {
  width: 280px;
  height: 280px;
  right: -160px;
  top: -150px;
  border: 32px solid rgba(196, 153, 86, .08);
}

.cb-dining-showcase::after {
  width: 200px;
  height: 200px;
  left: -120px;
  bottom: 38px;
  border: 26px solid rgba(172, 104, 60, .07);
}

.cb-dining-heading {
  position: relative;
  z-index: 1;
  max-width: 870px;
  margin: 0 auto 1.15rem;
  text-align: center;
}

.cb-dining-heading h2 {
  margin: 0 0 .65rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(31px, 3.25vw, 44px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.cb-dining-heading p {
  max-width: 780px;
  margin: 0 auto;
  color: var(--cb-muted, #5f7191);
}

.cb-dining-chip-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-bottom: 1.4rem;
}

.cb-dining-chip-row > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .5rem .75rem;
  border: 1px solid #ead9cb;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  color: #5a6a80;
  font-size: .78rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(60, 65, 74, .05);
}

.cb-dining-chip-row svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #b17033;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cb-dining-resident-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(330px, .98fr);
  gap: clamp(1.3rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid rgba(230, 216, 203, .92);
  border-radius: 22px;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.cb-dining-visual {
  position: relative;
  min-height: 535px;
  padding: 26px 24px 18px;
  isolation: isolate;
}

.cb-dining-platter {
  position: absolute;
  left: 8px;
  top: 16px;
  width: 245px;
  height: 245px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, #fff 0 34%, #f5e8d8 35% 48%, #f9f1e7 49% 62%, transparent 63%);
  box-shadow: 0 18px 42px rgba(182, 133, 86, .14);
  opacity: .98;
}

.cb-dining-platter-ring {
  position: absolute;
  inset: 24px;
  border: 3px dashed rgba(194, 132, 67, .18);
  border-radius: 50%;
}

.cb-dining-utensil {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 108px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(184, 132, 74, .15), rgba(184, 132, 74, .42));
  transform: translateY(-50%);
}

.cb-dining-utensil--fork {
  left: 20px;
}

.cb-dining-utensil--fork::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 10px;
  height: 18px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, rgba(184, 132, 74, .15), rgba(184, 132, 74, .42));
  box-shadow: -6px 0 0 rgba(184, 132, 74, .42), 6px 0 0 rgba(184, 132, 74, .42);
}

.cb-dining-utensil--knife {
  right: 20px;
  width: 8px;
  background: linear-gradient(180deg, rgba(184, 132, 74, .15), rgba(184, 132, 74, .42));
}

.cb-dining-utensil--knife::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -2px;
  width: 12px;
  height: 34px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, rgba(184, 132, 74, .15), rgba(184, 132, 74, .42));
}

.cb-dining-garnish {
  position: absolute;
  border-radius: 999px;
  opacity: .85;
}

.cb-dining-garnish--one {
  left: 68px;
  top: 42px;
  width: 28px;
  height: 28px;
  background: rgba(124, 167, 91, .18);
  box-shadow: 16px 12px 0 rgba(191, 128, 64, .18);
}

.cb-dining-garnish--two {
  right: 62px;
  bottom: 38px;
  width: 22px;
  height: 22px;
  background: rgba(191, 128, 64, .16);
  box-shadow: -14px -10px 0 rgba(124, 167, 91, .16);
}

.cb-dining-phone,
.cb-dining-locations-card,
.cb-dining-status-pill {
  margin: 0;
}

.cb-dining-phone {
  position: absolute;
  left: 18%;
  top: 32px;
  z-index: 2;
  width: min(250px, 44%);
  aspect-ratio: 828 / 1792;
  overflow: hidden;
  border: 7px solid #18202a;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 24px 44px rgba(35, 42, 51, .21);
  transform: rotate(-3.6deg);
}

.cb-dining-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 27px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  pointer-events: none;
}

.cb-dining-phone-speaker {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 3;
  width: 58px;
  height: 15px;
  border-radius: 999px;
  background: #18202a;
  transform: translateX(-50%);
}

.cb-dining-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cb-dining-locations-card {
  position: absolute;
  right: 0;
  bottom: 28px;
  z-index: 3;
  width: min(330px, 58%);
  padding: .9rem .95rem;
  border: 1px solid #e4d8c8;
  border-radius: 19px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 20px 36px rgba(48, 52, 58, .18);
}

.cb-dining-locations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .7rem;
}

.cb-dining-locations-head strong {
  color: #17345d;
  font-size: .9rem;
}

.cb-dining-locations-head span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #fdf1e5;
  color: #a0622e;
  font-size: .68rem;
  font-weight: 900;
}

.cb-dining-locations-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.cb-dining-locations-card li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .6rem;
  align-items: center;
  padding: .55rem;
  border: 1px solid #f0e3d8;
  border-radius: 14px;
  background: #fffaf6;
}

.cb-dining-locations-card li b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: #f4e7d5;
  font-size: 1rem;
}

.cb-dining-locations-card li strong,
.cb-dining-locations-card li small {
  display: block;
}

.cb-dining-locations-card li strong {
  color: #1c365d;
  font-size: .84rem;
}

.cb-dining-locations-card li small {
  margin-top: .06rem;
  color: #687b93;
  font-size: .72rem;
  line-height: 1.35;
}

.cb-dining-status-pill {
  position: absolute;
  left: 7%;
  bottom: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  min-height: 36px;
  padding: .48rem .68rem;
  border: 1px solid #f1d9c7;
  border-radius: 999px;
  background: #fff7ef;
  color: #a35f2b;
  font-size: .7rem;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(173, 112, 49, .12);
}

.cb-dining-status-pill span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #c07d3b;
  color: #fff;
}

.cb-dining-audience {
  display: inline-flex;
  align-items: center;
  margin-bottom: .45rem;
  padding: .36rem .62rem;
  border-radius: 999px;
  background: #f9ebde;
  color: #a15d2a;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cb-dining-audience--staff {
  background: #e7f4ff;
  color: #14528d;
}

.cb-dining-resident-copy h3,
.cb-dining-admin-copy h3 {
  margin: 0 0 .55rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(25px, 2.45vw, 34px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.cb-dining-resident-copy > p,
.cb-dining-admin-copy > p {
  margin: 0;
  color: var(--cb-muted, #5f7191);
}

.cb-dining-steps {
  position: relative;
  display: grid;
  gap: .65rem;
  margin-top: 1.1rem;
}

.cb-dining-steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 35px;
  bottom: 35px;
  width: 2px;
  background: linear-gradient(#d39a61, #c6b16a);
}

.cb-dining-steps article {
  position: relative;
  display: grid;
  grid-template-columns: 35px 42px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-height: 66px;
  padding: .55rem .65rem .55rem .15rem;
  border: 1px solid #ebe1d8;
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 7px 16px rgba(52, 61, 72, .05);
}

.cb-dining-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #c78343;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 0 0 1px #ead4bf;
}

.cb-dining-steps article:nth-child(2) .cb-dining-step-number {
  background: #c9a14b;
}

.cb-dining-steps article:nth-child(3) .cb-dining-step-number {
  background: #8f9f61;
}

.cb-dining-step-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #fcf1e5;
  color: #b16f36;
}

.cb-dining-steps article:nth-child(2) .cb-dining-step-icon {
  background: #f9f2df;
  color: #a68631;
}

.cb-dining-steps article:nth-child(3) .cb-dining-step-icon {
  background: #edf4e3;
  color: #60753e;
}

.cb-dining-step-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cb-dining-steps strong,
.cb-dining-steps small {
  display: block;
}

.cb-dining-steps strong {
  color: #17345d;
  font-size: .91rem;
}

.cb-dining-steps small {
  margin-top: .08rem;
  color: #6a7b91;
  font-size: .74rem;
  line-height: 1.35;
}

.cb-dining-benefits {
  gap: .55rem;
  margin-top: 1rem;
  font-size: .87rem;
}

.cb-dining-admin-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr);
  gap: clamp(1.2rem, 2.8vw, 2.2rem);
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1rem, 2.3vw, 1.55rem);
  border: 1px solid #dce4ec;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(247, 250, 252, .96), rgba(255, 255, 255, .88));
}

.cb-dining-admin-browser {
  overflow: hidden;
  border: 1px solid #d9e1e9;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(29, 55, 84, .14);
  transform: rotate(-.45deg);
}

.cb-dining-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 .75rem;
  border-bottom: 1px solid #e5e9ee;
  background: #f7f9fb;
}

.cb-dining-browser-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd4dd;
}

.cb-dining-browser-bar strong {
  margin-left: .35rem;
  color: #536b84;
  font-size: .68rem;
  font-weight: 850;
}

.cb-dining-admin-browser img {
  display: block;
  width: 100%;
  aspect-ratio: 2047 / 931;
  object-fit: cover;
  object-position: center;
}

.cb-dining-admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 1rem 0 1.15rem;
}

.cb-dining-admin-actions span {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-height: 43px;
  padding: .55rem .65rem;
  border: 1px solid #dbe5ed;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: #34506f;
  font-size: .76rem;
  font-weight: 800;
}

.cb-dining-admin-actions b {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: #f5e8dc;
  color: #a5642d;
  font-size: .75rem;
}

.cb-dining-admin-copy .btn {
  white-space: normal;
  text-align: center;
}

@media (max-width: 1050px) {
  .cb-dining-resident-grid,
  .cb-dining-admin-grid {
    grid-template-columns: 1fr;
  }

  .cb-dining-visual {
    width: min(100%, 760px);
    min-height: 555px;
    margin: 0 auto;
  }

  .cb-dining-resident-copy,
  .cb-dining-admin-copy {
    max-width: 760px;
    margin: 0 auto;
  }

  .cb-dining-admin-browser {
    width: min(100%, 860px);
    margin: 0 auto;
  }
}

@media (max-width: 680px) {
  .cb-dining-showcase {
    padding: 1rem;
    border-radius: 19px;
  }

  .cb-dining-heading {
    text-align: left;
  }

  .cb-dining-chip-row {
    justify-content: flex-start;
  }

  .cb-dining-chip-row > span {
    width: 100%;
    border-radius: 13px;
  }

  .cb-dining-resident-grid,
  .cb-dining-admin-grid {
    padding: .85rem;
    border-radius: 17px;
  }

  .cb-dining-visual {
    min-height: 450px;
    padding: 10px 4px 10px;
  }

  .cb-dining-platter {
    left: 0;
    top: 10px;
    width: 182px;
    height: 182px;
  }

  .cb-dining-phone {
    left: 14%;
    top: 24px;
    width: 46%;
    border-width: 5px;
    border-radius: 26px;
  }

  .cb-dining-phone::after {
    border-radius: 21px;
  }

  .cb-dining-phone-speaker {
    top: 4px;
    width: 44px;
    height: 11px;
  }

  .cb-dining-locations-card {
    right: 0;
    bottom: 28px;
    width: 56%;
    padding: .65rem;
    border-radius: 15px;
  }

  .cb-dining-locations-card li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: .5rem;
    padding: .45rem;
  }

  .cb-dining-locations-card li b {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: .9rem;
  }

  .cb-dining-locations-card li strong {
    font-size: .76rem;
  }

  .cb-dining-locations-card li small {
    font-size: .64rem;
  }

  .cb-dining-status-pill {
    left: 6%;
    bottom: 0;
    max-width: 60%;
    font-size: .57rem;
  }

  .cb-dining-steps article {
    grid-template-columns: 31px 38px minmax(0, 1fr);
    padding-right: .45rem;
  }

  .cb-dining-step-number {
    width: 31px;
    height: 31px;
  }

  .cb-dining-steps::before {
    left: 15px;
  }

  .cb-dining-step-icon {
    width: 38px;
    height: 38px;
  }

  .cb-dining-admin-actions {
    grid-template-columns: 1fr;
  }

  .cb-dining-admin-copy .btn {
    width: 100%;
  }
}

/* ChimeBuddy Games showcase */
.cb-section-kicker--garden {
  color: #2f7d48;
}

.cb-games-showcase {
  margin-top: 1.35rem;
  padding: clamp(1.15rem, 3vw, 2.35rem);
  border: 1px solid #cfe7c9;
  border-radius: 26px;
  background:
    radial-gradient(circle at 11% 7%, rgba(255, 218, 236, .66), transparent 24%),
    radial-gradient(circle at 92% 11%, rgba(255, 232, 153, .58), transparent 25%),
    linear-gradient(145deg, #f4fff0 0%, #ffffff 50%, #effaf6 100%);
  box-shadow: 0 16px 36px rgba(20, 82, 45, .09);
  overflow: hidden;
}

.cb-games-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
}

.cb-games-copy h2,
.cb-games-community-band h3,
.cb-game-card h3 {
  margin: 0 0 .6rem;
  color: #1f4f2d;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.cb-games-copy h2 {
  font-size: clamp(31px, 3.4vw, 48px);
}

.cb-games-copy p {
  max-width: 620px;
  color: #5e705f;
  font-size: 1.02rem;
}

.cb-games-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.05rem 0 1rem;
}

.cb-games-chip-row span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .55rem .75rem;
  border: 1px solid #cde4c6;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: #315c39;
  font-size: .82rem;
  font-weight: 850;
  box-shadow: 0 8px 16px rgba(28, 93, 45, .05);
}

.cb-games-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: 1rem 0 .9rem;
  max-width: 530px;
}

.cb-games-stat-row article {
  min-height: 86px;
  padding: .9rem .7rem;
  border: 1px solid #d8ead2;
  border-radius: 17px;
  background: rgba(255, 255, 255, .92);
  text-align: center;
  box-shadow: 0 8px 18px rgba(28, 93, 45, .06);
}

.cb-games-stat-row strong,
.cb-games-stat-row span {
  display: block;
}

.cb-games-stat-row strong {
  color: #2d6b3f;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.cb-games-stat-row span {
  margin-top: .35rem;
  color: #697a69;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.25;
}

.cb-games-checks {
  max-width: 590px;
}

.cb-games-checks li::before {
  color: #2e8647;
}

.cb-games-visual {
  position: relative;
  min-height: 620px;
  padding: 1rem;
  border-radius: 30px;
  background:
    radial-gradient(circle at 25% 28%, rgba(114, 190, 98, .22), transparent 33%),
    radial-gradient(circle at 77% 70%, rgba(246, 202, 84, .2), transparent 30%),
    linear-gradient(145deg, rgba(232, 249, 223, .9), rgba(248, 255, 248, .92));
  border: 1px solid #cae5c2;
  overflow: hidden;
}

.cb-games-visual::before {
  content: "";
  position: absolute;
  inset: auto -18% -24% 24%;
  height: 52%;
  border-radius: 50% 50% 0 0;
  background: rgba(211, 239, 186, .64);
  transform: rotate(-8deg);
}

.cb-games-visual-stack {
  position: relative;
  z-index: 2;
  min-height: 590px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .5rem .8rem .5rem 4.75rem;
}

.cb-games-stage {
  overflow: hidden;
  margin: 0;
  border: 1px solid #d9ead2;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 20px 38px rgba(20, 72, 36, .13);
}

.cb-games-stage img {
  width: 100%;
  height: 100%;
  display: block;
}

.cb-games-stage--main {
  width: min(100%, 390px);
  aspect-ratio: 680 / 1285;
  background: #f8fff6;
}

.cb-games-stage--main img {
  object-fit: cover;
  object-position: top center;
}

.cb-games-stage--support {
  position: absolute;
  left: 0;
  bottom: 1rem;
  width: min(34%, 190px);
  aspect-ratio: 720 / 1600;
  border-radius: 26px;
  background: #f8fff6;
}

.cb-games-stage--support img {
  object-fit: contain;
  object-position: center top;
  background: #f8fff6;
}

.cb-games-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .94fr) minmax(0, .94fr);
  gap: 1rem;
  margin-top: 1.2rem;
}

.cb-game-card {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 100%;
  padding: 1.1rem;
  border: 1px solid #d8ead2;
  border-radius: 22px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 11px 26px rgba(20, 72, 36, .07);
}

.cb-game-card--featured {
  border-color: #cfe7c9;
  background:
    radial-gradient(circle at 92% 15%, rgba(255, 217, 236, .6), transparent 34%),
    linear-gradient(145deg, #ffffff, #f5fff3);
}

.cb-game-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: .45rem;
  padding: .34rem .55rem;
  border-radius: 999px;
  background: #e1f4dc;
  color: #2c7241;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cb-game-card h3 {
  font-size: clamp(1.38rem, 2vw, 2rem);
}

.cb-game-card p {
  margin: 0;
  color: #637564;
  font-size: .95rem;
  line-height: 1.48;
}

.cb-game-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin-bottom: .75rem;
  border-radius: 18px;
  background: #f4fce9;
  color: #2e8647;
  font-size: 1.7rem;
}

.cb-game-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .9rem;
}

.cb-game-mini-tags span {
  padding: .42rem .55rem;
  border-radius: 999px;
  background: #fff8df;
  color: #87620c;
  font-size: .72rem;
  font-weight: 850;
}

.cb-game-card-visual {
  overflow: hidden;
  align-self: stretch;
  min-height: 230px;
  border: 1px solid #d9ead2;
  border-radius: 18px;
  background: #f7fff5;
}

.cb-game-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cb-game-card-visual--small {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 330px;
  margin-top: 1rem;
  padding: .75rem;
  background: linear-gradient(180deg, #fafff7 0%, #f3fbef 100%);
}

.cb-game-card-visual--garden img {
  object-position: top center;
}

.cb-games-community-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid #cce4c7;
  border-radius: 21px;
  background: linear-gradient(120deg, #2f7d48, #3b8f55);
  color: #fff;
  box-shadow: 0 15px 30px rgba(47, 125, 72, .16);
}

.cb-games-community-band h3,
.cb-games-community-band p {
  color: #fff;
}

.cb-games-community-band h3 {
  margin-bottom: .25rem;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.cb-games-community-band p {
  max-width: 850px;
  margin: 0;
  opacity: .92;
}

.cb-games-community-icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  float: left;
  margin: .05rem .75rem .2rem 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .18);
  font-size: 1.35rem;
}

.cb-games-community-band .btn {
  border-color: rgba(255, 255, 255, .65);
  background: #fff;
  color: #2f7d48;
  box-shadow: 0 12px 22px rgba(0, 0, 0, .12);
}

@media (max-width: 1050px) {
  .cb-games-hero-grid,
  .cb-games-card-grid,
  .cb-games-community-band {
    grid-template-columns: 1fr;
  }

  .cb-games-visual {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .cb-games-visual-stack {
    min-height: 560px;
    padding-left: 3.6rem;
  }

  .cb-games-stage--main {
    width: min(100%, 360px);
  }

  .cb-games-stage--support {
    width: min(32%, 170px);
  }

  .cb-games-community-band .btn {
    width: fit-content;
  }
}

@media (max-width: 680px) {
  .cb-games-showcase {
    padding: 1rem;
    border-radius: 20px;
  }

  .cb-games-copy p {
    font-size: .96rem;
  }

  .cb-games-chip-row span {
    width: 100%;
    border-radius: 14px;
  }

  .cb-games-stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }

  .cb-games-stat-row article {
    min-height: 76px;
    padding: .72rem .35rem;
    border-radius: 14px;
  }

  .cb-games-stat-row strong {
    font-size: 1.35rem;
  }

  .cb-games-stat-row span {
    font-size: .68rem;
  }

  .cb-games-visual {
    min-height: 0;
    padding: .85rem;
    border-radius: 22px;
  }

  .cb-games-visual-stack {
    min-height: auto;
    justify-content: center;
    padding: 0;
  }

  .cb-games-stage {
    border-radius: 20px;
  }

  .cb-games-stage--main {
    width: 100%;
    max-width: 360px;
  }

  .cb-games-stage--support {
    display: none;
  }

  .cb-game-card,
  .cb-game-card--featured {
    grid-template-columns: 1fr;
    padding: .9rem;
    border-radius: 18px;
  }

  .cb-game-card-visual {
    min-height: 245px;
  }

  .cb-game-card-visual--small {
    height: 300px;
    padding: .65rem;
  }

  .cb-games-community-band {
    padding: 1rem;
    border-radius: 18px;
    text-align: left;
  }

  .cb-games-community-band .btn {
    width: 100%;
  }
}

.cb-game-card-visual--small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: transparent;
}

/* Family Portal marketing feature section */

.cb-family-portal-feature :where(p, small, strong) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.cb-family-portal-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 2.1rem 0;
  padding: clamp(1.15rem, 2.8vw, 2.1rem);
  border: 1px solid #f1d99f;
  border-radius: 30px;
  background:
    radial-gradient(circle at 6% 12%, rgba(255, 221, 126, .45), transparent 28%),
    radial-gradient(circle at 96% 18%, rgba(121, 190, 159, .22), transparent 28%),
    linear-gradient(135deg, #fff7df 0%, #fffdf8 44%, #f4fbf0 100%);
  box-shadow: 0 24px 54px rgba(95, 66, 16, .11);
}

.cb-family-portal-bg {
  position: absolute;
  inset: auto -10% -28% auto;
  width: min(48vw, 560px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 206, 82, .28), rgba(255, 206, 82, .04) 58%, transparent 60%);
  z-index: -1;
}

.cb-family-portal-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  gap: clamp(1.35rem, 3vw, 2.25rem);
  align-items: center;
}

.cb-family-portal-copy h2 {
  max-width: 720px;
  margin: .4rem 0 .85rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(2rem, 3.2vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.cb-family-portal-copy p {
  max-width: 700px;
  margin: 0;
  color: #596d72;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.62;
}

.cb-family-portal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.15rem 0 1.3rem;
}

.cb-family-portal-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .42rem .72rem;
  border: 1px solid rgba(23, 111, 101, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #176f65;
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(23, 111, 101, .06);
}

.cb-family-portal-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
  margin: 1.25rem 0 1.45rem;
}

.cb-family-portal-feature-list article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .72rem;
  align-items: start;
  padding: .95rem;
  border: 1px solid rgba(218, 184, 98, .36);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(95, 66, 16, .06);
}

.cb-family-portal-feature-list article > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: #fff5cf;
  font-size: 1.3rem;
}

.cb-family-portal-feature-list strong,
.cb-family-portal-bottom-row strong,
.cb-family-portal-preview-head strong,
.cb-family-portal-side-card strong {
  display: block;
  color: var(--cb-navy, #09295f);
}

.cb-family-portal-feature-list small {
  display: block;
  max-width: none;
  margin-top: .26rem;
  color: #617276;
  font-size: .86rem;
  line-height: 1.46;
  text-align: left;
}

.cb-family-portal-visual {
  position: relative;
  min-height: 560px;
  padding: clamp(.85rem, 1.5vw, 1.25rem) clamp(.75rem, 2vw, 1.65rem) 3.25rem;
}

.cb-family-portal-browser {
  position: relative;
  overflow: hidden;
  width: min(100%, 720px);
  margin-left: auto;
  border: 1px solid rgba(9, 41, 95, .08);
  border-radius: 28px;
  background: linear-gradient(180deg, #fffefa 0%, #fff8e9 100%);
  box-shadow: 0 32px 65px rgba(9, 41, 95, .16);
}

.cb-family-portal-browser::before {
  content: "";
  position: absolute;
  right: -12%;
  top: -18%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 205, 75, .55), rgba(255, 231, 157, .12) 58%, transparent 60%);
}

.cb-family-portal-browser-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .42rem;
  padding: .86rem 1rem;
  border-bottom: 1px solid rgba(9, 41, 95, .07);
  background: rgba(255, 255, 255, .72);
}

.cb-family-portal-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffd36c;
}

.cb-family-portal-browser-bar span:nth-child(2) { background: #8bd6b2; }
.cb-family-portal-browser-bar span:nth-child(3) { background: #8db4ef; }

.cb-family-portal-browser-bar strong {
  margin-left: .35rem;
  color: var(--cb-navy, #09295f);
  font-size: .85rem;
}

.cb-family-portal-hero-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(255, 219, 124, .58);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff9e8 0%, #fffdf8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 26px rgba(95, 66, 16, .08);
}

.cb-family-portal-hero-card small {
  display: inline-flex;
  margin-bottom: .25rem;
  color: #9d6814;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cb-family-portal-hero-card strong {
  display: block;
  color: var(--cb-navy, #09295f);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.cb-family-portal-hero-card span {
  display: block;
  max-width: 380px;
  margin-top: .35rem;
  color: #607174;
  font-size: .86rem;
}

.cb-family-portal-hero-card b {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 999px;
  background: #ffe08b;
  color: #9a650f;
  font-size: .86rem;
  box-shadow: 0 14px 25px rgba(154, 101, 15, .16);
}

.cb-family-portal-stat-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  padding: 0 1rem 1rem;
}

.cb-family-portal-stat-grid div,
.cb-family-portal-preview-grid article {
  border: 1px solid rgba(9, 41, 95, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 22px rgba(9, 41, 95, .055);
}

.cb-family-portal-stat-grid div {
  min-height: 96px;
  padding: .84rem .76rem;
  border-top: 4px solid #78be9f;
}

.cb-family-portal-stat-grid small {
  display: block;
  color: #9d6814;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cb-family-portal-stat-grid strong {
  display: block;
  margin-top: .28rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.05;
}

.cb-family-portal-preview-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  padding: 0 1rem 1rem;
}

.cb-family-portal-preview-grid article {
  padding: 1rem;
}

.cb-family-portal-wide-card {
  grid-column: 1 / -1;
}

.cb-family-portal-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.cb-family-portal-preview-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #eaf7df;
  color: #2f7d48;
  font-size: .65rem;
  font-weight: 900;
}

.cb-family-portal-preview-grid p {
  margin: .55rem 0 0;
  color: #607174;
  font-size: .86rem;
}

.cb-family-portal-doc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  margin-top: .85rem;
}

.cb-family-portal-doc-line span {
  display: block;
  height: 36px;
  border: 1px solid #efe3bf;
  border-radius: 11px;
  background: #fffdf8;
}

.cb-family-portal-doc-line b {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #135d68, #0f6f78);
  color: #fff;
  font-size: .72rem;
  box-shadow: 0 10px 18px rgba(19, 93, 104, .16);
}

.cb-family-portal-side-card {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  width: min(325px, 52%);
  min-width: 265px;
  padding: .86rem .95rem;
  border: 1px solid rgba(218, 184, 98, .38);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 36px rgba(9, 41, 95, .14);
  backdrop-filter: blur(12px);
}

.cb-family-portal-side-card > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: #fff3c8;
  font-size: 1.35rem;
}

.cb-family-portal-side-card > div,
.cb-family-portal-bottom-row > div > div,
.cb-family-portal-feature-list article > div {
  min-width: 0;
}

.cb-family-portal-side-card small {
  display: block;
  max-width: none;
  margin-top: .24rem;
  color: #667477;
  font-size: .82rem;
  line-height: 1.42;
  text-align: left;
}

.cb-family-portal-side-card--top {
  top: auto;
  left: -.35rem;
  bottom: .85rem;
}

.cb-family-portal-side-card--bottom {
  right: -.35rem;
  bottom: .85rem;
}

.cb-family-portal-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 1.2rem;
}

.cb-family-portal-bottom-row > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .78rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid rgba(23, 111, 101, .13);
  border-radius: 19px;
  background: rgba(255, 255, 255, .76);
}

.cb-family-portal-bottom-row span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #eff8e8;
  font-size: 1.16rem;
}

.cb-family-portal-bottom-row small {
  display: block;
  max-width: none;
  margin-top: .25rem;
  color: #617276;
  font-size: .88rem;
  line-height: 1.48;
  text-align: left;
}

@media (max-width: 1080px) {
  .cb-family-portal-grid,
  .cb-family-portal-bottom-row {
    grid-template-columns: 1fr;
  }

  .cb-family-portal-visual {
    min-height: 0;
    padding-inline: 0;
  }

  .cb-family-portal-browser {
    margin-inline: auto;
  }

  .cb-family-portal-side-card {
    position: relative;
    width: auto;
    inset: auto;
    margin: .8rem auto 0;
    max-width: 460px;
  }

  .cb-family-portal-side-card--bottom {
    margin-top: .65rem;
  }
}

@media (max-width: 720px) {
  .cb-family-portal-feature {
    padding: 1rem;
    border-radius: 22px;
  }

  .cb-family-portal-feature-list,
  .cb-family-portal-stat-grid,
  .cb-family-portal-preview-grid {
    grid-template-columns: 1fr;
  }

  .cb-family-portal-hero-card {
    align-items: flex-start;
  }

  .cb-family-portal-hero-card b {
    width: 58px;
    height: 58px;
    font-size: .72rem;
  }

  .cb-family-portal-stat-grid div {
    min-height: 72px;
  }

  .cb-family-portal-bottom-row > div,
  .cb-family-portal-side-card,
  .cb-family-portal-feature-list article {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .cb-family-portal-pills span {
    width: 100%;
    justify-content: center;
  }

  .cb-family-portal-hero-card {
    flex-direction: column;
  }

  .cb-family-portal-browser-bar strong {
    font-size: .78rem;
  }

  .cb-family-portal-doc-line {
    grid-template-columns: 1fr;
  }

  .cb-family-portal-doc-line b {
    justify-content: center;
  }
}

/* SEO landing pages: Dining Reservations */
.cb-landing-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--cb-line, #dbe9f8);
  background:
    radial-gradient(circle at 8% 16%, rgba(193, 128, 70, .18), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(31, 184, 170, .12), transparent 28%),
    linear-gradient(112deg, #fffaf5 0%, #f7fcff 54%, #ffffff 100%);
}

.cb-dining-landing-hero::before {
  content: "";
  position: absolute;
  right: -160px;
  top: -170px;
  width: 430px;
  height: 430px;
  border: 42px solid rgba(193, 128, 70, .07);
  border-radius: 50%;
  pointer-events: none;
}

.cb-landing-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(560px, 1.08fr);
  gap: clamp(2rem, 4vw, 4.25rem);
  align-items: center;
  min-height: 660px;
  padding: clamp(3.4rem, 6vw, 5.8rem) 0;
}

.cb-landing-hero-copy h1 {
  margin: 0 0 1rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.06em;
}

.cb-landing-hero-copy p {
  max-width: 610px;
  margin: 0 0 1.55rem;
  color: #405673;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
}

.cb-landing-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.1rem;
}

.cb-landing-proof-row span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .45rem .72rem;
  border: 1px solid #ead9cb;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: #52647b;
  font-size: .78rem;
  font-weight: 850;
  box-shadow: 0 6px 16px rgba(47, 58, 72, .05);
}

.cb-landing-proof-row span::before {
  content: "✓";
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  margin-right: .4rem;
  border-radius: 50%;
  background: #f8eadc;
  color: #a15d2a;
  font-size: .65rem;
  font-weight: 950;
}

.cb-dining-hero-visual {
  position: relative;
  min-height: 560px;
  isolation: isolate;
}

.cb-dining-room-art {
  position: absolute;
  right: 0;
  top: 24px;
  z-index: 1;
  width: min(610px, 100%);
  border: 1px solid rgba(234, 219, 207, .9);
  border-radius: 34px;
  box-shadow: 0 24px 56px rgba(34, 50, 72, .13);
}

.cb-dining-hero-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: min(255px, 42%);
  aspect-ratio: 828 / 1792;
  margin: 0;
  overflow: hidden;
  border: 7px solid #18202a;
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 28px 52px rgba(28, 38, 54, .24);
  transform: rotate(-3deg);
}

.cb-dining-hero-phone > span {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 4;
  width: 70px;
  height: 16px;
  border-radius: 999px;
  background: #18202a;
  transform: translateX(-50%);
}

.cb-dining-hero-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cb-dining-hero-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 29px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}

.cb-dining-hero-card {
  position: absolute;
  z-index: 4;
  width: min(245px, 44%);
  padding: .85rem .95rem;
  border: 1px solid #ead9cb;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 32px rgba(36, 47, 64, .15);
}

.cb-dining-hero-card strong,
.cb-dining-hero-card small {
  display: block;
}

.cb-dining-hero-card strong {
  color: #17345d;
  font-size: .94rem;
}

.cb-dining-hero-card small {
  margin-top: .15rem;
  color: #64748b;
  font-size: .76rem;
}

.cb-dining-hero-card--top {
  left: 38%;
  top: 18px;
  transform: rotate(2deg);
}

.cb-dining-hero-card--bottom {
  right: 4%;
  bottom: 44px;
  transform: rotate(-1.6deg);
}

.cb-landing-section {
  overflow: hidden;
}

.cb-soft-band {
  background: linear-gradient(180deg, rgba(247, 252, 255, .72), rgba(255, 250, 245, .42));
  border-top: 1px solid rgba(219, 233, 248, .7);
  border-bottom: 1px solid rgba(219, 233, 248, .7);
}

.cb-problem-grid,
.cb-split-feature,
.cb-locations-section,
.cb-related-panel {
  display: grid;
  gap: clamp(1.5rem, 3.2vw, 3rem);
  align-items: center;
}

.cb-problem-grid {
  grid-template-columns: minmax(0, .9fr) minmax(540px, 1.1fr);
}

.cb-problem-grid h2,
.cb-split-feature h2,
.cb-locations-section h2,
.cb-related-panel h2 {
  margin: 0 0 .8rem;
  color: var(--cb-navy, #09295f);
  font-size: clamp(31px, 3.45vw, 46px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.cb-problem-grid p,
.cb-split-feature-copy > p,
.cb-locations-section > div > p,
.cb-related-panel p {
  margin: 0;
  color: var(--cb-muted, #5f7191);
  font-size: 1.02rem;
}

.cb-problem-card-grid,
.cb-location-card-grid,
.cb-benefit-grid-four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cb-problem-card-grid article,
.cb-location-card-grid article,
.cb-benefit-grid-four article {
  min-height: 190px;
  padding: 1.15rem;
  border: 1px solid #dfeaf4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 45, 72, .055);
}

.cb-problem-card-grid span,
.cb-location-card-grid span,
.cb-benefit-grid-four span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: .8rem;
  border-radius: 18px;
  background: #fff1e5;
  font-size: 1.45rem;
}

.cb-problem-card-grid h3,
.cb-location-card-grid h3,
.cb-benefit-grid-four h3 {
  margin: 0 0 .35rem;
  color: #17345d;
  font-size: 1.07rem;
}

.cb-problem-card-grid p,
.cb-location-card-grid p,
.cb-benefit-grid-four p {
  margin: 0;
  color: #65778f;
  font-size: .92rem;
  line-height: 1.5;
}

.cb-workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: clamp(1.3rem, 3vw, 2.4rem);
  align-items: center;
}

.cb-workflow-art-card {
  padding: .75rem;
  border: 1px solid #dfe8f0;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(27, 49, 75, .08);
}

.cb-workflow-art-card img {
  width: 100%;
  border-radius: 22px;
}

.cb-workflow-steps {
  display: grid;
  gap: .85rem;
}

.cb-workflow-steps article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid #e6e1dc;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 22px rgba(36, 50, 70, .05);
}

.cb-workflow-steps article > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #c78343;
  color: #fff;
  font-weight: 950;
  box-shadow: 0 0 0 1px #ead4bf;
}

.cb-workflow-steps article:nth-child(2) > span { background: #c9a14b; }
.cb-workflow-steps article:nth-child(3) > span { background: #8f9f61; }

.cb-workflow-steps h3 {
  margin: 0 0 .2rem;
  color: #17345d;
  font-size: 1.06rem;
}

.cb-workflow-steps p {
  margin: 0;
  color: #65778f;
  font-size: .94rem;
}

.cb-split-feature {
  grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
  border: 1px solid var(--cb-line, #dbe9f8);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgba(193, 128, 70, .1), transparent 25%),
    linear-gradient(135deg, #ffffff, #f7fcff);
  box-shadow: 0 18px 42px rgba(19, 42, 72, .075);
}

.cb-split-feature--reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
}

.cb-split-feature--reverse .cb-split-feature-copy {
  order: 2;
}

.cb-phone-showcase {
  position: relative;
  display: grid;
  min-height: 560px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #eadbcf;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 44%, rgba(199, 131, 67, .14), transparent 34%),
    linear-gradient(145deg, #fffaf5, #f5fbff);
}

.cb-phone-showcase .iphone-frame {
  width: min(250px, 58%);
  box-shadow: 0 26px 48px rgba(25, 39, 57, .22);
}

.cb-floating-note {
  position: absolute;
  z-index: 5;
  width: 178px;
  padding: .72rem .85rem;
  border: 1px solid #ead9cb;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 28px rgba(38, 52, 72, .13);
}

.cb-floating-note strong,
.cb-floating-note span {
  display: block;
}

.cb-floating-note strong {
  color: #17345d;
  font-size: .88rem;
}

.cb-floating-note span {
  color: #64748b;
  font-size: .73rem;
}

.cb-floating-note--left {
  left: 7%;
  top: 18%;
  transform: rotate(-2deg);
}

.cb-floating-note--right {
  right: 6%;
  bottom: 16%;
  transform: rotate(2deg);
}

.cb-locations-section {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
}

.cb-location-card-grid article:nth-child(2) span { background: #eaf8f3; }
.cb-location-card-grid article:nth-child(3) span { background: #f5efff; }
.cb-location-card-grid article:nth-child(4) span { background: #fff6d9; }

.cb-browser-showcase {
  overflow: hidden;
  border: 1px solid #dbe5ee;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 42px rgba(28, 49, 76, .14);
}

.cb-browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 .9rem;
  border-bottom: 1px solid #e5e9ee;
  background: #f7f9fb;
}

.cb-browser-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd4dd;
}

.cb-browser-bar strong {
  margin-left: .35rem;
  color: #536b84;
  font-size: .74rem;
  font-weight: 850;
}

.cb-browser-showcase img {
  width: 100%;
  aspect-ratio: 2047 / 931;
  object-fit: cover;
  object-position: center;
}

.cb-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.2rem;
}

.cb-stat-grid div {
  min-height: 100px;
  padding: 1rem;
  border: 1px solid #e3ebf3;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
}

.cb-stat-grid strong,
.cb-stat-grid span {
  display: block;
}

.cb-stat-grid strong {
  color: #17345d;
  font-size: 1.02rem;
}

.cb-stat-grid span {
  margin-top: .25rem;
  color: #65778f;
  font-size: .86rem;
  line-height: 1.42;
}

.cb-benefit-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cb-benefit-grid-four article {
  min-height: 210px;
}

.cb-related-panel {
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  padding: clamp(1.3rem, 2.8vw, 2.2rem);
  border: 1px solid #dbe8f4;
  border-radius: 28px;
  background: linear-gradient(135deg, #f7fcff, #fffaf5);
  box-shadow: 0 16px 36px rgba(20, 45, 77, .07);
}

.cb-related-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.cb-related-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 64px;
  padding: .85rem 1rem;
  border: 1px solid #deebf4;
  border-radius: 16px;
  background: #fff;
  color: #17406e;
  font-size: .9rem;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(28, 51, 78, .045);
}

.cb-related-links a::after {
  content: "→";
  color: #a15d2a;
  font-weight: 950;
}

.cb-faq-list {
  display: grid;
  gap: .8rem;
  max-width: 920px;
  margin: 0 auto;
}

.cb-faq-list details {
  border: 1px solid #dfeaf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(22, 45, 72, .045);
}

.cb-faq-list summary {
  cursor: pointer;
  padding: 1rem 1.1rem;
  color: #17345d;
  font-weight: 900;
  list-style: none;
}

.cb-faq-list summary::-webkit-details-marker {
  display: none;
}

.cb-faq-list summary::after {
  content: "+";
  float: right;
  color: #a15d2a;
  font-weight: 950;
}

.cb-faq-list details[open] summary::after {
  content: "–";
}

.cb-faq-list p {
  margin: 0;
  padding: 0 1.1rem 1rem;
  color: #65778f;
}

.cb-final-cta--dining {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  background:
    radial-gradient(circle at 84% 18%, rgba(193,128,70,.16), transparent 30%),
    linear-gradient(135deg, #fffaf5, #f4fbff);
}

.cb-final-cta--dining .cb-final-cta-copy {
  max-width: 700px;
}

.cb-final-cta--dining .btn {
  margin-top: 1.1rem;
}

.cb-final-cta-visual img {
  width: 100%;
  border: 1px solid #eadbcf;
  border-radius: 22px;
  box-shadow: 0 18px 34px rgba(31, 45, 63, .12);
}

.cb-dining-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.cb-dining-cta-row .btn {
  white-space: normal;
  text-align: center;
}

@media (max-width: 1080px) {
  .cb-landing-hero-grid,
  .cb-problem-grid,
  .cb-workflow-grid,
  .cb-split-feature,
  .cb-split-feature--reverse,
  .cb-locations-section,
  .cb-related-panel,
  .cb-final-cta--dining {
    grid-template-columns: 1fr;
  }

  .cb-landing-hero-grid {
    min-height: 0;
  }

  .cb-dining-hero-visual {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .cb-split-feature--reverse .cb-split-feature-copy {
    order: 0;
  }

  .cb-phone-showcase {
    min-height: 520px;
  }

  .cb-benefit-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cb-landing-hero-grid {
    padding: 2.5rem 0;
    gap: 1.7rem;
  }

  .cb-landing-hero-copy h1 {
    font-size: clamp(38px, 11vw, 48px);
  }

  .cb-dining-hero-visual {
    min-height: 500px;
  }

  .cb-dining-room-art {
    top: 0;
    width: 100%;
    border-radius: 24px;
  }

  .cb-dining-hero-phone {
    width: 43%;
    left: 2%;
    border-width: 5px;
    border-radius: 28px;
  }

  .cb-dining-hero-phone::after {
    border-radius: 23px;
  }

  .cb-dining-hero-phone > span {
    width: 52px;
    height: 12px;
  }

  .cb-dining-hero-card {
    width: 52%;
    padding: .7rem .75rem;
  }

  .cb-dining-hero-card--top {
    left: 42%;
    top: 12px;
  }

  .cb-dining-hero-card--bottom {
    right: 2%;
    bottom: 26px;
  }

  .cb-problem-card-grid,
  .cb-location-card-grid,
  .cb-benefit-grid-four,
  .cb-stat-grid,
  .cb-related-links {
    grid-template-columns: 1fr;
  }

  .cb-problem-card-grid article,
  .cb-location-card-grid article,
  .cb-benefit-grid-four article {
    min-height: 0;
  }

  .cb-split-feature {
    padding: 1rem;
    border-radius: 22px;
  }

  .cb-phone-showcase {
    min-height: 470px;
  }

  .cb-floating-note {
    width: 148px;
    padding: .62rem .7rem;
  }

  .cb-floating-note--left {
    left: 4%;
    top: 10%;
  }

  .cb-floating-note--right {
    right: 4%;
    bottom: 10%;
  }

  .cb-related-panel {
    padding: 1rem;
    border-radius: 22px;
  }

  .cb-final-cta--dining {
    padding: 1rem;
  }

  .cb-dining-cta-row .btn,
  .cb-final-cta--dining .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cb-dining-hero-visual {
    min-height: 435px;
  }

  .cb-dining-hero-card small {
    display: none;
  }

  .cb-dining-hero-card {
    width: 46%;
  }

  .cb-phone-showcase {
    min-height: 405px;
  }

  .cb-phone-showcase .iphone-frame {
    width: min(220px, 64%);
  }

  .cb-floating-note {
    width: 126px;
  }

  .cb-workflow-steps article {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .cb-workflow-steps article > span {
    width: 40px;
    height: 40px;
  }
}

/* SEO landing pages: Visitor Check-In */
.cb-visitor-landing-hero {
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 204, 126, .20), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(15, 143, 136, .12), transparent 28%),
    linear-gradient(112deg, #fffdf8 0%, #f6fcff 56%, #ffffff 100%);
}

.cb-visitor-landing-hero::before {
  content: "";
  position: absolute;
  right: -150px;
  top: -170px;
  width: 440px;
  height: 440px;
  border: 42px solid rgba(15, 143, 136, .07);
  border-radius: 50%;
  pointer-events: none;
}

.cb-visitor-hero-visual {
  position: relative;
  min-height: 560px;
  isolation: isolate;
}

.cb-visitor-welcome-art {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 1;
  width: min(620px, 100%);
  border: 1px solid rgba(219, 232, 244, .95);
  border-radius: 34px;
  box-shadow: 0 24px 56px rgba(34, 50, 72, .13);
}

.cb-visitor-hero-browser {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: min(292px, 46%);
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9e3ed;
  border-radius: 22px;
  background: #f4f7fb;
  box-shadow: 0 28px 52px rgba(28, 38, 54, .24);
  transform: rotate(-3deg);
}

.cb-visitor-hero-browser img {
  display: block;
  width: 100%;
  height: 365px;
  object-fit: cover;
  object-position: top center;
}

.cb-visitor-hero-card {
  position: absolute;
  z-index: 4;
  width: min(260px, 46%);
  padding: .85rem .95rem;
  border: 1px solid #d8e8f0;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 32px rgba(36, 47, 64, .15);
}

.cb-visitor-hero-card strong,
.cb-visitor-hero-card small {
  display: block;
}

.cb-visitor-hero-card strong {
  color: #17345d;
  font-size: .94rem;
}

.cb-visitor-hero-card small {
  margin-top: .15rem;
  color: #64748b;
  font-size: .76rem;
}

.cb-visitor-hero-card--top {
  left: 40%;
  top: 18px;
  transform: rotate(2deg);
}

.cb-visitor-hero-card--bottom {
  right: 3%;
  bottom: 42px;
  transform: rotate(-1.4deg);
}

.cb-visitor-form-showcase {
  position: relative;
  display: grid;
  min-height: 560px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe8f4;
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 42%, rgba(15, 143, 136, .13), transparent 34%),
    linear-gradient(145deg, #fffdf8, #f5fbff);
}

.cb-browser-showcase--visitor-form {
  width: min(340px, 68%);
  max-height: 500px;
  transform: rotate(-1deg);
}

.cb-browser-showcase--visitor-form img {
  aspect-ratio: auto;
  height: 462px;
  object-fit: cover;
  object-position: top center;
}

.cb-visitor-ticket-showcase {
  position: relative;
  display: grid;
  min-height: 560px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe8f4;
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 44%, rgba(199, 131, 67, .12), transparent 34%),
    linear-gradient(145deg, #fffaf5, #f5fbff);
}

.cb-visitor-ticket-shell {
  position: relative;
  width: min(315px, 76%);
  padding: .48rem;
  border: 1px solid #e2d8c8;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 44px rgba(38, 52, 72, .18);
  transform: rotate(1.5deg);
}

.cb-visitor-ticket-shell img {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
}

.cb-final-cta--visitor {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  background:
    radial-gradient(circle at 84% 18%, rgba(15, 143, 136, .14), transparent 30%),
    linear-gradient(135deg, #fffdf8, #f4fbff);
}

.cb-final-cta--visitor .cb-final-cta-copy {
  max-width: 700px;
}

.cb-final-cta--visitor .btn {
  margin-top: 1.1rem;
}

@media (max-width: 1080px) {
  .cb-visitor-hero-visual {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .cb-final-cta--visitor {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cb-visitor-hero-visual {
    min-height: 500px;
  }

  .cb-visitor-welcome-art {
    top: 0;
    width: 100%;
    border-radius: 24px;
  }

  .cb-visitor-hero-browser {
    width: 46%;
    left: 1%;
    border-radius: 18px;
  }

  .cb-visitor-hero-browser img {
    height: 300px;
  }

  .cb-visitor-hero-card {
    width: 54%;
    padding: .7rem .75rem;
  }

  .cb-visitor-hero-card--top {
    left: 42%;
    top: 12px;
  }

  .cb-visitor-hero-card--bottom {
    right: 1%;
    bottom: 28px;
  }

  .cb-visitor-form-showcase,
  .cb-visitor-ticket-showcase {
    min-height: 470px;
  }

  .cb-browser-showcase--visitor-form {
    width: min(285px, 72%);
  }

  .cb-browser-showcase--visitor-form img {
    height: 390px;
  }

  .cb-visitor-ticket-shell {
    width: min(270px, 76%);
  }

  .cb-visitor-ticket-shell img {
    height: 390px;
  }

  .cb-final-cta--visitor {
    padding: 1rem;
  }

  .cb-final-cta--visitor .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cb-visitor-hero-visual {
    min-height: 430px;
  }

  .cb-visitor-hero-card small {
    display: none;
  }

  .cb-visitor-hero-card {
    width: 48%;
  }

  .cb-visitor-hero-browser img {
    height: 240px;
  }

  .cb-visitor-form-showcase,
  .cb-visitor-ticket-showcase {
    min-height: 405px;
  }

  .cb-browser-showcase--visitor-form {
    width: min(235px, 72%);
  }

  .cb-browser-showcase--visitor-form img {
    height: 315px;
  }

  .cb-visitor-ticket-shell {
    width: min(230px, 78%);
  }

  .cb-visitor-ticket-shell img {
    height: 320px;
  }
}

/* SEO landing pages: Event Calendar */
.cb-events-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.1rem;
}

.cb-event-landing-hero {
  background:
    radial-gradient(circle at 12% 14%, rgba(18, 55, 102, .10), transparent 27%),
    radial-gradient(circle at 82% 20%, rgba(15, 143, 136, .14), transparent 28%),
    linear-gradient(112deg, #f7fcff 0%, #fffaf5 55%, #ffffff 100%);
}

.cb-event-landing-hero::before {
  content: "";
  position: absolute;
  right: -150px;
  top: -170px;
  width: 440px;
  height: 440px;
  border: 42px solid rgba(18, 55, 102, .065);
  border-radius: 50%;
  pointer-events: none;
}

.cb-event-hero-visual {
  position: relative;
  min-height: 560px;
  isolation: isolate;
}

.cb-event-calendar-art {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 1;
  width: min(620px, 100%);
  border: 1px solid rgba(219, 232, 244, .95);
  border-radius: 34px;
  box-shadow: 0 24px 56px rgba(34, 50, 72, .13);
}

.cb-event-hero-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: min(255px, 42%);
  aspect-ratio: 828 / 1792;
  margin: 0;
  overflow: hidden;
  border: 7px solid #18202a;
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 28px 52px rgba(28, 38, 54, .24);
  transform: rotate(-3deg);
}

.cb-event-hero-phone > span,
.cb-event-phone-shell > span {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 4;
  width: 70px;
  height: 16px;
  border-radius: 999px;
  background: #18202a;
  transform: translateX(-50%);
}

.cb-event-hero-phone img,
.cb-event-phone-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cb-event-hero-phone::after,
.cb-event-phone-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 29px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}


.cb-event-screen-offset {
  box-sizing: border-box;
  padding-top: 18px;
}

.cb-event-screen-offset--hero,
.cb-event-screen-offset--events {
  padding-top: 20px;
}

.cb-event-screen-offset img {
  display: block;
  height: calc(100% - 18px);
}

.cb-event-screen-offset--hero img,
.cb-event-screen-offset--events img {
  height: calc(100% - 20px);
}

.cb-event-hero-card {
  position: absolute;
  z-index: 4;
  width: min(245px, 44%);
  padding: .85rem .95rem;
  border: 1px solid #d8e8f0;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 32px rgba(36, 47, 64, .15);
}

.cb-event-hero-card strong,
.cb-event-hero-card small {
  display: block;
}

.cb-event-hero-card strong {
  color: #17345d;
  font-size: .94rem;
}

.cb-event-hero-card small {
  margin-top: .15rem;
  color: #64748b;
  font-size: .76rem;
}

.cb-event-hero-card--top {
  left: 38%;
  top: 18px;
  transform: rotate(2deg);
}

.cb-event-hero-card--bottom {
  right: 4%;
  bottom: 44px;
  transform: rotate(-1.6deg);
}

.cb-event-phone-showcase,
.cb-event-reminder-showcase,
.cb-event-attendee-showcase {
  position: relative;
  display: grid;
  min-height: 560px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe8f4;
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 44%, rgba(15, 143, 136, .12), transparent 34%),
    linear-gradient(145deg, #f7fcff, #fffaf5);
}

.cb-event-phone-shell {
  position: relative;
  width: min(250px, 58%);
  aspect-ratio: 828 / 1792;
  margin: 0;
  overflow: hidden;
  border: 7px solid #18202a;
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 26px 48px rgba(25, 39, 57, .22);
}

.cb-event-phone-shell--reminders {
  width: min(270px, 62%);
  transform: rotate(1.4deg);
}

.cb-event-phone-shell--reminders img {
  object-fit: contain;
  background: #f7f3ec;
}

.cb-browser-showcase--event-attendees {
  position: relative;
  width: min(620px, 92%);
  transform: rotate(-1.2deg);
}

.cb-browser-showcase--event-attendees img {
  aspect-ratio: 1.63 / 1;
  object-fit: cover;
  object-position: center;
}

.cb-event-attendee-pill {
  position: absolute;
  right: 8%;
  bottom: 12%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem .9rem;
  border: 1px solid #d8e8f0;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #17345d;
  font-size: .86rem;
  font-weight: 900;
  box-shadow: 0 18px 32px rgba(36, 47, 64, .15);
}

.cb-event-attendee-pill span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #e8f8f3;
  color: #0f7c72;
}

.cb-final-cta--events {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  background:
    radial-gradient(circle at 84% 18%, rgba(15, 143, 136, .14), transparent 30%),
    linear-gradient(135deg, #f7fcff, #fffaf5);
}

.cb-final-cta--events .cb-final-cta-copy {
  max-width: 700px;
}

.cb-final-cta--events .btn {
  margin-top: 1.1rem;
}

@media (max-width: 1080px) {
  .cb-event-hero-visual {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .cb-final-cta--events {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cb-events-actions .btn {
    width: 100%;
  }

  .cb-event-hero-visual {
    min-height: 500px;
  }

  .cb-event-calendar-art {
    top: 0;
    width: 100%;
    border-radius: 24px;
  }

  .cb-event-hero-phone {
    width: 43%;
    left: 2%;
    border-width: 5px;
    border-radius: 28px;
  }

  .cb-event-hero-phone::after,
  .cb-event-phone-shell::after {
    border-radius: 23px;
  }

  .cb-event-hero-phone > span,
  .cb-event-phone-shell > span {
    width: 52px;
    height: 12px;
  }

  .cb-event-screen-offset {
    padding-top: 14px;
  }

  .cb-event-screen-offset--hero,
  .cb-event-screen-offset--events {
    padding-top: 16px;
  }

  .cb-event-screen-offset img {
    height: calc(100% - 14px);
  }

  .cb-event-screen-offset--hero img,
  .cb-event-screen-offset--events img {
    height: calc(100% - 16px);
  }

  .cb-event-hero-card {
    width: 52%;
    padding: .7rem .75rem;
  }

  .cb-event-hero-card--top {
    left: 42%;
    top: 12px;
  }

  .cb-event-hero-card--bottom {
    right: 2%;
    bottom: 26px;
  }

  .cb-event-phone-showcase,
  .cb-event-reminder-showcase,
  .cb-event-attendee-showcase {
    min-height: 470px;
  }

  .cb-event-phone-shell {
    width: min(220px, 64%);
    border-width: 5px;
    border-radius: 28px;
  }

  .cb-browser-showcase--event-attendees {
    width: 96%;
  }

  .cb-event-attendee-pill {
    right: auto;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .cb-final-cta--events {
    padding: 1rem;
  }

  .cb-final-cta--events .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cb-event-hero-visual {
    min-height: 435px;
  }

  .cb-event-hero-card small {
    display: none;
  }

  .cb-event-hero-card {
    width: 46%;
  }

  .cb-event-phone-showcase,
  .cb-event-reminder-showcase,
  .cb-event-attendee-showcase {
    min-height: 405px;
  }

  .cb-event-phone-shell {
    width: min(205px, 66%);
  }

  .cb-event-attendee-pill {
    font-size: .78rem;
  }
}


/* Location safety landing page */
.cb-safety-landing-hero {
  background:
    radial-gradient(circle at 12% 14%, rgba(18, 55, 102, .10), transparent 27%),
    radial-gradient(circle at 82% 20%, rgba(15, 143, 136, .15), transparent 28%),
    linear-gradient(112deg, #f7fcff 0%, #fffaf5 55%, #ffffff 100%);
}

.cb-safety-landing-hero::before {
  content: "";
  position: absolute;
  left: -110px;
  bottom: -150px;
  width: 360px;
  height: 360px;
  border: 36px solid rgba(15, 143, 136, .08);
  border-radius: 50%;
  pointer-events: none;
}

.cb-safety-hero-visual {
  position: relative;
  min-height: 560px;
  isolation: isolate;
}

.cb-safety-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid rgba(219, 232, 244, .95);
  border-radius: 34px;
  box-shadow: 0 24px 56px rgba(34, 50, 72, .13);
  background: #fff;
}

.cb-safety-hero-chip {
  position: absolute;
  z-index: 4;
  width: min(250px, 44%);
  padding: .85rem .95rem;
  border: 1px solid #d8e8f0;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 32px rgba(36, 47, 64, .15);
}

.cb-safety-hero-chip strong,
.cb-safety-hero-chip small {
  display: block;
}

.cb-safety-hero-chip strong {
  color: #17345d;
  font-size: .96rem;
}

.cb-safety-hero-chip small {
  margin-top: .16rem;
  color: #64748b;
  font-size: .76rem;
}

.cb-safety-hero-chip--top {
  left: 4%;
  top: 26px;
  transform: rotate(-2deg);
}

.cb-safety-hero-chip--bottom {
  right: 5%;
  bottom: 30px;
  transform: rotate(2deg);
}

.cb-safety-settings-showcase,
.cb-safety-boundary-showcase {
  position: relative;
  display: grid;
  min-height: 560px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe8f4;
  border-radius: 24px;
  background:
    radial-gradient(circle at 52% 44%, rgba(15, 143, 136, .12), transparent 34%),
    linear-gradient(145deg, #f7fcff, #fffaf5);
}

.cb-phone-showcase--safety-settings {
  width: 100%;
  min-height: 520px;
}

.cb-phone-showcase--safety-settings .iphone-frame.large {
  width: min(270px, 64%);
}

.cb-safety-boundary-showcase img {
  width: min(680px, 92%);
  height: auto;
  display: block;
}

.cb-final-cta--safety {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  background:
    radial-gradient(circle at 84% 18%, rgba(15, 143, 136, .14), transparent 30%),
    linear-gradient(135deg, #f7fcff, #fffaf5);
}

.cb-final-cta--safety .cb-final-cta-copy {
  max-width: 700px;
}

.cb-final-cta--safety .btn {
  margin-top: 1.1rem;
}

@media (max-width: 1080px) {
  .cb-safety-hero-visual {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .cb-final-cta--safety {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cb-safety-hero-visual {
    min-height: 500px;
  }

  .cb-safety-hero-art {
    border-radius: 24px;
  }

  .cb-safety-hero-chip {
    width: 52%;
    padding: .7rem .75rem;
  }

  .cb-safety-hero-chip--top {
    top: 14px;
  }

  .cb-safety-hero-chip--bottom {
    right: 2%;
    bottom: 18px;
  }

  .cb-safety-settings-showcase,
  .cb-safety-boundary-showcase {
    min-height: 470px;
  }

  .cb-phone-showcase--safety-settings {
    min-height: 430px;
  }

  .cb-phone-showcase--safety-settings .iphone-frame.large {
    width: min(225px, 68%);
  }

  .cb-final-cta--safety {
    padding: 1rem;
  }

  .cb-final-cta--safety .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cb-safety-hero-visual {
    min-height: 420px;
  }

  .cb-safety-hero-chip small {
    display: none;
  }

  .cb-safety-hero-chip {
    width: 46%;
  }

  .cb-safety-settings-showcase,
  .cb-safety-boundary-showcase {
    min-height: 405px;
  }
}


.cb-workflow-art-card--safety {
  padding: 1.1rem;
}

.cb-safety-flow-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.cb-safety-flow-cards article {
  position: relative;
  min-height: 292px;
  padding: 1.25rem 1rem 1.15rem;
  border: 1px solid #dfe8f0;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #fbfcfd);
  box-shadow: 0 16px 28px rgba(27, 49, 75, .08);
}

.cb-safety-flow-cards article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.12rem;
  width: 1.35rem;
  height: 4px;
  border-radius: 999px;
  background: #0f8f88;
  transform: translateY(-50%);
}

.cb-safety-flow-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #e8f8f3;
  color: #0f7c72;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.cb-safety-flow-cards article:nth-child(2) .cb-safety-flow-icon {
  background: #eef5ff;
  color: #17345d;
}

.cb-safety-flow-cards article:nth-child(3) .cb-safety-flow-icon {
  background: #fff3ef;
  color: #d96558;
}

.cb-safety-flow-cards article:nth-child(4) .cb-safety-flow-icon {
  background: #fef7da;
  color: #c98b2d;
}

.cb-safety-flow-cards h3 {
  margin: 0 0 .8rem;
  color: #17345d;
  font-size: 1.22rem;
  line-height: 1.25;
}

.cb-safety-flow-cards p {
  margin: 0;
  color: #52637a;
  font-size: 1rem;
  line-height: 1.58;
}

@media (max-width: 980px) {
  .cb-safety-flow-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cb-safety-flow-cards article:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .cb-safety-flow-cards {
    grid-template-columns: 1fr;
  }

  .cb-safety-flow-cards article {
    min-height: auto;
  }
}

/* Staff operations, command center, ticket management, photo messaging, and quiet hours */
.cb-section-kicker--staff { color: #244f78; }
.cb-section-kicker--gold { color: #8a6418; }
.cb-section-kicker--photo { color: #3f6e9c; }
.cb-section-kicker--quiet { color: #5b5aa7; }

.cb-staff-ops {
  margin-top: 1.4rem;
  padding: clamp(1.2rem, 3vw, 2.35rem);
  overflow: hidden;
  border: 1px solid #d8e1ea;
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 2%, rgba(48, 119, 124, .14), transparent 27%),
    radial-gradient(circle at 8% 20%, rgba(224, 181, 91, .12), transparent 25%),
    linear-gradient(145deg, #f8fbff 0%, #ffffff 46%, #f8f4ed 100%);
  box-shadow: 0 18px 42px rgba(22, 43, 70, .08);
}

.cb-staff-ops-heading {
  width: min(100%, 820px);
  margin: 0 auto 1.6rem;
  text-align: center;
}

.cb-staff-ops-heading h2,
.cb-ticket-workflow-copy h2,
.cb-facility-admin-copy h2,
.cb-photo-message-copy h2,
.cb-quiet-hours-copy h2 {
  margin: 0 0 .65rem;
  color: #172b45;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.cb-staff-ops-heading p,
.cb-ticket-workflow-copy > p,
.cb-facility-admin-copy > p,
.cb-photo-message-copy > p,
.cb-quiet-hours-copy > p {
  margin: 0;
  color: #5d6c7d;
  font-size: 1rem;
  line-height: 1.68;
}

.cb-staff-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, .5fr);
  gap: 1rem;
  align-items: stretch;
}

.cb-product-browser {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d7e0e9;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(26, 46, 71, .11);
}

.cb-product-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 .85rem;
  border-bottom: 1px solid #e5eaf0;
  background: #f6f8fb;
}

.cb-product-browser-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8d1db;
}

.cb-product-browser-bar strong {
  margin-left: .35rem;
  overflow: hidden;
  color: #596b80;
  font-size: .72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-product-browser img {
  display: block;
  width: 100%;
  height: auto;
  background: #f7f7f7;
}

.cb-product-browser--analytics img {
  aspect-ratio: 1477 / 835;
  object-fit: cover;
  object-position: top center;
}

.cb-staff-command-mobile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  align-items: end;
  padding: .85rem;
  overflow: hidden;
  border: 1px solid #d9e1e8;
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 14%, rgba(222, 187, 111, .23), transparent 30%),
    linear-gradient(145deg, #f4efe7, #f9fbfd);
}

.cb-app-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #ddd7cc;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 14px 26px rgba(36, 47, 59, .13);
}

.cb-app-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.cb-app-shot--command { transform: translateY(14px) rotate(-1.4deg); }
.cb-app-shot--queue { transform: translateY(-4px) rotate(1.4deg); }

.cb-staff-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}

.cb-staff-outcome-grid article {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #dce4ec;
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 9px 20px rgba(26, 46, 71, .05);
}

.cb-staff-outcome-grid article > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: .65rem;
  border-radius: 12px;
  background: #eaf2fb;
  color: #284d72;
  font-size: .72rem;
  font-weight: 950;
}

.cb-staff-outcome-grid article:nth-child(2) > span { background: #e9f7ef; color: #26724a; }
.cb-staff-outcome-grid article:nth-child(3) > span { background: #fff3dc; color: #94661c; }
.cb-staff-outcome-grid article:nth-child(4) > span { background: #fce9ec; color: #9b4654; }

.cb-staff-outcome-grid h3 {
  margin: 0 0 .35rem;
  color: #20354f;
  font-size: 1rem;
  line-height: 1.25;
}

.cb-staff-outcome-grid p {
  margin: 0;
  color: #657487;
  font-size: .88rem;
  line-height: 1.52;
}

.cb-ticket-workflow-panel,
.cb-facility-admin-panel,
.cb-photo-messaging,
.cb-quiet-hours {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 3vw, 2.4rem);
  align-items: center;
  margin-top: 1.15rem;
  padding: clamp(1.1rem, 2.6vw, 1.8rem);
  border: 1px solid #dedfdc;
  border-radius: 24px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 13px 30px rgba(31, 45, 63, .06);
}

.cb-ticket-workflow-copy .btn {
  margin-top: 1.15rem;
}

.cb-ticket-workflow-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  align-items: center;
  min-width: 0;
  padding: .85rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at 16% 16%, rgba(218, 179, 91, .18), transparent 28%),
    linear-gradient(145deg, #f4efe7, #f5f9fd);
}

.cb-app-shot--thread { transform: translateY(-8px) rotate(-1deg); }
.cb-app-shot--timeline { transform: translateY(10px) rotate(1.2deg); }

.cb-facility-admin-panel {
  grid-template-columns: minmax(0, 1.32fr) minmax(280px, .68fr);
  background:
    radial-gradient(circle at 90% 12%, rgba(55, 126, 123, .12), transparent 31%),
    linear-gradient(145deg, #f8fbff, #ffffff);
}

.cb-product-browser--admin img {
  aspect-ratio: 1372 / 746;
  object-fit: cover;
  object-position: top center;
}

.cb-facility-admin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: 1rem;
}

.cb-facility-admin-list span {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: .65rem .75rem;
  border: 1px solid #dce7ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  color: #324b68;
  font-size: .82rem;
  font-weight: 850;
}

.cb-photo-messaging {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  background:
    radial-gradient(circle at 8% 6%, rgba(181, 214, 248, .22), transparent 31%),
    linear-gradient(145deg, #f8fbff, #fffdf9);
}

.cb-photo-message-visual {
  position: relative;
  min-height: 520px;
  padding: .5rem 7rem 1rem .25rem;
}

.cb-photo-phone {
  width: min(100%, 390px);
  min-height: 500px;
  overflow: hidden;
  border: 7px solid #1c2f47;
  border-radius: 34px;
  background: #f7f9fc;
  box-shadow: 0 22px 42px rgba(26, 48, 73, .18);
}

.cb-photo-phone-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem;
  border-bottom: 1px solid #e2e8ef;
  background: #fff;
}

.cb-photo-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: #193a63;
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
}

.cb-photo-phone-head strong,
.cb-photo-phone-head small,
.cb-photo-bubble strong,
.cb-photo-bubble small {
  display: block;
}

.cb-photo-phone-head strong { color: #203853; font-size: .9rem; }
.cb-photo-phone-head small { color: #7b8794; font-size: .7rem; }

.cb-photo-chat {
  display: grid;
  gap: .7rem;
  padding: 1rem;
}

.cb-photo-bubble {
  width: fit-content;
  max-width: 82%;
  padding: .72rem .85rem;
  border: 1px solid #dce5ee;
  border-radius: 17px 17px 17px 6px;
  background: #fff;
  color: #405369;
  font-size: .78rem;
  line-height: 1.45;
  box-shadow: 0 7px 15px rgba(32, 55, 80, .05);
}

.cb-photo-bubble--outgoing {
  justify-self: end;
  border-radius: 17px 17px 6px 17px;
  border-color: #bcd8f6;
  background: #eaf4ff;
}

.cb-photo-bubble--image {
  width: 80%;
  max-width: none;
  padding: .55rem;
}

.cb-photo-thumb {
  position: relative;
  height: 150px;
  margin-bottom: .55rem;
  overflow: hidden;
  border-radius: 13px;
  background:
    linear-gradient(165deg, transparent 56%, #6fa16e 57%),
    linear-gradient(145deg, transparent 52%, #93bf7e 53%),
    linear-gradient(#9ed9ef 0 60%, #cbe8b4 61%);
}

.cb-photo-thumb span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 18px rgba(24, 62, 75, .14);
}

.cb-photo-thumb i,
.cb-photo-thumb b {
  position: absolute;
  bottom: 25px;
  width: 44px;
  height: 70px;
  border-radius: 8px 8px 2px 2px;
  background: #f1e7d2;
  box-shadow: inset 0 0 0 4px rgba(119, 92, 65, .1);
}

.cb-photo-thumb i { left: 22%; }
.cb-photo-thumb b { right: 20%; height: 92px; }
.cb-photo-bubble--image strong { color: #2d465f; font-size: .78rem; }
.cb-photo-bubble--image small { margin-top: .1rem; color: #758396; font-size: .68rem; }

.cb-photo-compose {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .55rem;
  align-items: center;
  margin: .35rem .85rem .85rem;
  padding: .65rem .7rem;
  border: 1px solid #dce5ee;
  border-radius: 15px;
  background: #fff;
  color: #56708a;
  font-size: .72rem;
}

.cb-photo-compose span { color: #2c6499; font-weight: 850; }
.cb-photo-compose i { color: #9aa4af; font-style: normal; }
.cb-photo-compose b { color: #2c6499; }

.cb-photo-note-shot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(43%, 225px);
  margin: 0;
  overflow: hidden;
  border: 1px solid #d6dde5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 38px rgba(31, 45, 63, .19);
  transform: rotate(2.4deg);
}

.cb-photo-note-shot img {
  display: block;
  width: 100%;
}

.cb-quiet-hours {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  background:
    radial-gradient(circle at 89% 9%, rgba(111, 110, 190, .15), transparent 29%),
    linear-gradient(145deg, #fbfbff, #f8f6f1);
}

.cb-quiet-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}

.cb-quiet-benefits article {
  padding: .82rem;
  border: 1px solid #e1e1eb;
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
}

.cb-quiet-benefits article > span,
.cb-quiet-benefits strong,
.cb-quiet-benefits small {
  display: block;
}

.cb-quiet-benefits article > span { margin-bottom: .45rem; font-size: 1.25rem; }
.cb-quiet-benefits strong { color: #333654; font-size: .82rem; line-height: 1.25; }
.cb-quiet-benefits small { margin-top: .25rem; color: #77778a; font-size: .72rem; line-height: 1.4; }

.cb-quiet-graphic {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid #d9d9e5;
  border-radius: 28px;
  background: linear-gradient(165deg, #1a2850 0 45%, #f3eee6 46% 100%);
  box-shadow: 0 18px 38px rgba(36, 41, 75, .15);
}

.cb-quiet-sky {
  position: relative;
  height: 210px;
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 23%, rgba(255, 239, 178, .2), transparent 20%),
    linear-gradient(145deg, #162448, #293765);
}

.cb-quiet-sky::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -65px;
  height: 120px;
  border-radius: 50%;
  background: #26365f;
}

.cb-quiet-moon {
  position: absolute;
  right: 13%;
  top: 28px;
  z-index: 2;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border-radius: 50%;
  background: #f9df83;
  color: #253255;
  font-size: 3.5rem;
  line-height: 1;
  box-shadow: 0 0 0 12px rgba(249, 223, 131, .08), 0 0 34px rgba(249, 223, 131, .25);
}

.cb-star {
  position: absolute;
  z-index: 2;
  color: #fff6cf;
  font-style: normal;
}
.cb-star--1 { left: 13%; top: 38px; }
.cb-star--2 { left: 42%; top: 72px; font-size: .7rem; }
.cb-star--3 { left: 28%; top: 125px; }

.cb-quiet-time {
  position: absolute;
  left: 9%;
  bottom: 44px;
  z-index: 3;
  padding: .7rem .85rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 15px;
  background: rgba(255,255,255,.1);
  color: #fff;
  backdrop-filter: blur(8px);
}

.cb-quiet-time strong,
.cb-quiet-time span { display: block; }
.cb-quiet-time strong { font-size: 1.1rem; }
.cb-quiet-time span { opacity: .76; font-size: .7rem; }

.cb-quiet-phone-card {
  position: absolute;
  left: 50%;
  top: 112px;
  z-index: 5;
  width: min(82%, 430px);
  padding: 1rem;
  border: 1px solid #dfdfe8;
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  transform: translateX(-50%);
  box-shadow: 0 20px 38px rgba(24, 30, 54, .22);
}

.cb-quiet-phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #353753;
  font-size: .88rem;
  font-weight: 900;
}

.cb-quiet-phone-head b {
  padding: .3rem .55rem;
  border-radius: 999px;
  background: #e6f5ec;
  color: #28704a;
  font-size: .67rem;
}

.cb-quiet-schedule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .55rem;
  align-items: center;
  margin: .8rem 0 .65rem;
  padding: .7rem;
  border-radius: 15px;
  background: #f0f1f8;
  color: #3a3d5b;
  text-align: center;
}

.cb-quiet-schedule i { color: #9395a9; font-style: normal; }

.cb-quiet-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  margin-bottom: .75rem;
}

.cb-quiet-days span {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #e9eaf5;
  color: #525672;
  font-size: .65rem;
  font-weight: 900;
}

.cb-quiet-days span:nth-child(-n+5) { background: #6366a8; color: #fff; }

.cb-quiet-rule {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: center;
  padding: .65rem;
  border: 1px solid #e6e7ee;
  border-radius: 14px;
  background: #fafafe;
}

.cb-quiet-rule + .cb-quiet-rule { margin-top: .5rem; }
.cb-quiet-rule > span { font-size: 1rem; }
.cb-quiet-rule strong,
.cb-quiet-rule small { display: block; }
.cb-quiet-rule strong { color: #3e425d; font-size: .75rem; }
.cb-quiet-rule small { color: #85879a; font-size: .65rem; }
.cb-quiet-rule > b { color: #67699f; font-size: .64rem; }
.cb-quiet-rule--urgent { border-color: #f0d9c6; background: #fff9f4; }
.cb-quiet-rule--urgent > b { color: #a15d26; }

.cb-quiet-morning {
  position: absolute;
  right: 6%;
  bottom: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .9rem;
  border: 1px solid #e0d8ca;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 25px rgba(44, 39, 29, .11);
}

.cb-quiet-morning > span { font-size: 1.4rem; }
.cb-quiet-morning strong,
.cb-quiet-morning small { display: block; }
.cb-quiet-morning strong { color: #4e4538; font-size: .82rem; }
.cb-quiet-morning small { color: #8a8177; font-size: .66rem; }

@media (max-width: 1050px) {
  .cb-staff-command-grid,
  .cb-ticket-workflow-panel,
  .cb-facility-admin-panel,
  .cb-photo-messaging,
  .cb-quiet-hours {
    grid-template-columns: 1fr;
  }

  .cb-staff-command-mobile {
    width: min(100%, 660px);
    margin: 0 auto;
  }

  .cb-staff-outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cb-ticket-workflow-copy,
  .cb-facility-admin-copy,
  .cb-photo-message-copy,
  .cb-quiet-hours-copy {
    order: -1;
  }

  .cb-photo-message-visual,
  .cb-quiet-graphic {
    width: min(100%, 720px);
    margin: 0 auto;
  }
}

@media (max-width: 680px) {
  .cb-staff-ops,
  .cb-ticket-workflow-panel,
  .cb-facility-admin-panel,
  .cb-photo-messaging,
  .cb-quiet-hours {
    padding: 1rem;
    border-radius: 20px;
  }

  .cb-staff-command-mobile,
  .cb-ticket-workflow-visual {
    gap: .55rem;
    padding: .55rem;
    border-radius: 18px;
  }

  .cb-app-shot { border-radius: 14px; }
  .cb-app-shot--command,
  .cb-app-shot--queue,
  .cb-app-shot--thread,
  .cb-app-shot--timeline { transform: none; }

  .cb-staff-outcome-grid {
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  .cb-staff-outcome-grid article {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: .7rem;
    align-items: start;
    padding: .85rem;
  }

  .cb-staff-outcome-grid article > span { grid-row: 1 / span 2; margin: 0; }
  .cb-staff-outcome-grid h3 { margin: .05rem 0 .2rem; }

  .cb-facility-admin-list,
  .cb-quiet-benefits {
    grid-template-columns: 1fr;
  }

  .cb-photo-message-visual {
    min-height: 480px;
    padding: 0 4.2rem 1rem 0;
  }

  .cb-photo-phone {
    min-height: 455px;
    border-width: 5px;
    border-radius: 27px;
  }

  .cb-photo-note-shot {
    width: min(39%, 155px);
    border-radius: 16px;
  }

  .cb-photo-thumb { height: 120px; }

  .cb-quiet-graphic { min-height: 455px; border-radius: 20px; }
  .cb-quiet-sky { height: 190px; }
  .cb-quiet-moon { width: 66px; height: 66px; font-size: 2.8rem; }
  .cb-quiet-phone-card { top: 102px; width: 90%; padding: .8rem; border-radius: 19px; }
  .cb-quiet-time { left: 5%; bottom: 35px; padding: .55rem .65rem; }
  .cb-quiet-morning { right: 4%; bottom: 18px; padding: .62rem .7rem; }
}

/* 2026-07 Games expansion: Buddy Defense + refreshed Bingo */
.cb-games-visual--defense {
  background:
    radial-gradient(circle at 24% 22%, rgba(90, 150, 105, .26), transparent 31%),
    radial-gradient(circle at 78% 72%, rgba(68, 92, 138, .18), transparent 28%),
    linear-gradient(145deg, #edf7e9, #eef4f7);
}

.cb-games-stage--defense-main {
  aspect-ratio: 828 / 1792;
  background: #f5f2eb;
}

.cb-games-stage--defense-main img,
.cb-games-stage--defense-overview img {
  object-fit: contain;
  object-position: top center;
  background: #f5f2eb;
}

.cb-games-stage--defense-overview {
  aspect-ratio: 828 / 1792;
}

.cb-games-card-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-game-card--defense {
  background:
    radial-gradient(circle at 92% 12%, rgba(115, 151, 114, .2), transparent 32%),
    linear-gradient(145deg, #ffffff, #f2f8ef);
}

.cb-game-card--bingo {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 207, 79, .2), transparent 33%),
    linear-gradient(145deg, #ffffff, #fffaf0);
}

.cb-game-badge--gold {
  background: #fff0bf;
  color: #8b6310;
}

.cb-game-card-visual--defense,
.cb-game-card-visual--bingo {
  background: #f6f2ea;
}

.cb-game-card-visual--defense img,
.cb-game-card-visual--bingo img {
  object-fit: contain;
  object-position: center top;
}

@media (max-width: 680px) {
  .cb-games-card-grid--four {
    grid-template-columns: 1fr;
  }
}

/* ChimeBuddy brand film: reusable "A Day in the Life" showcase */
.cb-day-in-life {
  position: relative;
  overflow: hidden;
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(circle at 10% 15%, rgba(31, 184, 170, .2), transparent 32%),
    radial-gradient(circle at 92% 82%, rgba(72, 128, 255, .22), transparent 34%),
    linear-gradient(135deg, #071c43 0%, #0a2d68 52%, #0c4fb9 100%);
}

.cb-day-in-life::before,
.cb-day-in-life::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  pointer-events: none;
}

.cb-day-in-life::before {
  width: 340px;
  height: 340px;
  top: -210px;
  right: 10%;
}

.cb-day-in-life::after {
  width: 230px;
  height: 230px;
  bottom: -155px;
  left: 6%;
}

.cb-day-in-life-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(520px, 1.2fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

.cb-day-in-life-copy {
  color: rgba(255, 255, 255, .86);
}

.cb-day-in-life-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .8rem;
  margin-bottom: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.cb-day-in-life-kicker span {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--cb-teal);
  color: #fff;
  font-size: .62rem;
  padding-left: .1rem;
}

.cb-day-in-life h2 {
  max-width: 620px;
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(2.3rem, 4.4vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.cb-day-in-life-copy > p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.68;
}

.cb-day-in-life-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.45rem;
}

.cb-day-in-life-highlights span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
  font-size: .82rem;
  font-weight: 750;
}

.cb-day-in-life-highlights span::before {
  content: "✓";
  color: #66e3d6;
  font-weight: 900;
}

.cb-day-in-life-actions {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.65rem;
}

.cb-day-in-life-prompt {
  max-width: 260px;
  color: rgba(255, 255, 255, .72);
  font-size: .86rem;
  font-weight: 650;
}

.cb-day-in-life-button {
  background: #fff;
  color: var(--cb-blue);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}

.cb-day-in-life-button:hover {
  background: #f2fbff;
  color: var(--cb-blue-2);
  transform: translateY(-1px);
}

.cb-day-in-life-video-shell {
  position: relative;
  padding: clamp(.55rem, 1vw, .8rem);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: clamp(1.2rem, 2vw, 1.8rem);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 28px 75px rgba(0, 8, 32, .42);
  backdrop-filter: blur(12px);
}

.cb-day-in-life-video-shell::before {
  content: "Featured film";
  position: absolute;
  top: -12px;
  right: 28px;
  z-index: 2;
  padding: .42rem .72rem;
  border-radius: 999px;
  background: var(--cb-teal);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cb-day-in-life-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(.9rem, 1.5vw, 1.3rem);
  background: #020712;
}

.cb-day-in-life-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1050px) {
  .cb-day-in-life-card {
    grid-template-columns: 1fr;
  }

  .cb-day-in-life-copy {
    max-width: 800px;
  }

  .cb-day-in-life-video-shell {
    width: min(100%, 920px);
  }
}

@media (max-width: 620px) {
  .cb-day-in-life {
    padding: 3.15rem 0 3.5rem;
  }

  .cb-day-in-life-card {
    gap: 2.25rem;
  }

  .cb-day-in-life h2 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
  }

  .cb-day-in-life-highlights {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cb-day-in-life-highlights span {
    width: fit-content;
  }

  .cb-day-in-life-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .cb-day-in-life-button {
    width: 100%;
  }

  .cb-day-in-life-video-shell {
    margin-inline: -4px;
    padding: .42rem;
    border-radius: 1rem;
  }

  .cb-day-in-life-video {
    border-radius: .72rem;
  }

  .cb-day-in-life-video-shell::before {
    right: 14px;
  }
}