/* ==========================================================================
   Feature explorer + personalize grid

   Ported from the previous Kore site (new_kore_website), extracted from its
   compiled style.css so the explorer itself is what the CEO signed off on.
   Do not "tidy" the component rules.

   Two things were deliberately changed from the original: the section header
   uses this site's .k-h2 / .k-lede / .k-btn, and the container measure below
   matches .k-container. The ported widths were from a different grid and made
   the section wider than everything around it.

   Contents:
     1. .reservations-features / .trx-tabs, the vertical feature explorer
     2. .fx-*, the bespoke Reservations demos
     3. .app-fx: generic CSS-only app mocks used
                                              by every other product page
     4. .reservations-personalize, the "Set it up the way you run
                                              the room" bento grid
   ========================================================================== */

/* Clear the fixed header and the sticky in-page nav when jumped to via anchor. */
.reservations-features,
.reservations-personalize { scroll-margin-top: calc(var(--header-h, 76px) + 72px); }

/* Same measure and gutters as .k-container, so this section lines up with
   every other one on the page. The ported rules capped content at 1592px
   behind 163px gutters, wider than the site's 1400px, which is why the
   explorer looked oversized on a large screen. */
.reservations-features .container,
.reservations-personalize {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.reservations-features {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.reservations-features__section {
  width: 100%;
  border-top: 1px solid #e8e8ed;
  /* Was 111px/110px, ported from the old site. Matched to this site's
     section rhythm instead, or the explorer opens a hole in the page. */
  padding: clamp(48px, 4.4vw, 64px) 0;
  display: flex;
  justify-content: center;
}
.reservations-features__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.reservations-features__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 760px;
  text-align: center;
}
/* The header now uses this site's .k-h2 / .k-lede / .k-btn instead of the
   ported title, subtitle and button styles, which were 48px Neuzeit at weight
   400 with 8px-radius buttons, a different design language to every other
   section. Only the layout of the actions row is kept. */
.reservations-features__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reservations-features__body {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}
.reservations-features__tablist {
  width: 227px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.reservations-features__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 11px;
  border-radius: 10px;
  cursor: pointer;
}
.reservations-features__tab:hover .reservations-features__tab-label {
  color: #1d1d1f;
}
.reservations-features__tab.is-active {
  background: #f5f5f5;
}
.reservations-features__tab.is-active .reservations-features__tab-label {
  color: #1d1d1f;
}
.reservations-features__tab-icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: #f5f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reservations-features__tab-icon img {
  width: 18px;
  height: 18px;
}
.reservations-features__tab-label {
  font-size: 15.5px;
  line-height: 23.25px;
  color: #6e6e73;
  white-space: nowrap;
}
.reservations-features__panel {
  flex: 1 0 0;
  min-width: 1px;
  background: #f5f5f5;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  padding: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.reservations-features__panel-copy {
  width: 369px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.reservations-features__panel-title {
  font-family: "Neuzeit Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 35.2px;
  letter-spacing: -0.64px;
  color: #1d1d1f;
}
.reservations-features__panel-text {
  font-size: 14px;
  line-height: 20.9px;
  color: #6e6e73;
}
.reservations-features__panel-list {
  padding-top: 10.5px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.reservations-features__panel-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 24px;
  color: #1d1d1f;
  white-space: nowrap;
}
.reservations-features__panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  background: url("../assets/images/reservations/check-circle-cyan.svg") center/contain no-repeat;
}
.reservations-features__figure {
  flex: 1 0 0;
  min-width: 1px;
  aspect-ratio: 368/276;
  background: #ffffff;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 62px 25px;
  margin: 0;
}
.reservations-features__booking {
  position: relative;
  width: 280px;
  max-width: 100%;
}
.reservations-features__booking-card {
  background: #ffffff;
  border: 1px solid #e8e8ed;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.07));
}
.reservations-features__booking-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.reservations-features__booking-logo {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
}
.reservations-features__booking-logo img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  max-width: none;
  transform: translate(-50%, -50%);
}
.reservations-features__booking-name {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reservations-features__booking-name strong {
  font-family: "Neuzeit Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 18.75px;
  color: #1d1d1f;
}
.reservations-features__booking-name small {
  font-size: 9.5px;
  line-height: 14.25px;
  color: #6e6e73;
}
.reservations-features__booking-times {
  display: flex;
  gap: 6px;
}
.reservations-features__booking-times span {
  flex: 1 0 0;
  padding: 8px 0;
  border-radius: 7px;
  background: #f5f5f7;
  color: #6e6e73;
  font-size: 10.5px;
  line-height: 15.75px;
  text-align: center;
}
.reservations-features__booking-times span.is-selected {
  background: rgba(0, 180, 229, 0.1);
  color: #1d1d1f;
}
.reservations-features__booking-btn {
  height: 36px;
  border-radius: 9px;
  background: #00b4e5;
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reservations-features__booking-badge {
  position: absolute;
  right: -1px;
  bottom: -12px;
  padding: 10px 13px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 11px;
  line-height: 16.5px;
  white-space: nowrap;
  filter: drop-shadow(0 8px 9px rgba(22, 163, 74, 0.3));
}
@media (max-width: 768px) {
  .reservations-channels .container,
  .reservations-journey__header,
  .reservations-journey__content,
  .reservations-journey__steps,
  .reservations-pricing__cards,
  .reservations-features__header,
  .reservations-cta__inner {
    flex-direction: column;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .reservations-journey__media {
    flex: none;
  }
}
@media (max-width: 992px) {
  .reservations-features__body {
    flex-direction: column;
    gap: 24px;
  }
  .reservations-features__tablist {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .reservations-features__tablist::-webkit-scrollbar {
    display: none;
  }
  .reservations-features__tab {
    flex: none;
    white-space: nowrap;
  }
  .reservations-features__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px;
  }
  .reservations-features__panel-copy {
    width: 100%;
  }
  .reservations-features__panel-list li {
    white-space: normal;
  }
  .reservations-features__figure {
    width: 100%;
    aspect-ratio: auto;
    padding: 40px 20px;
  }
}
@media (max-width: 768px) {
  .reservations-features__section {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}
.reservations-features,
.ordering-pass {
  --trx-ink: #1d1d1f;
  --trx-sub: #6e6e73;
  --trx-line: #e8e8ed;
  --trx-bg: #ffffff;
  --trx-bg2: #f5f5f7;
  --trx-blue: #002574;
  --trx-radius: 16px;
}
/* ---- Feature tabs ---- */
/* Measured against the selected state, which is the wide one: the active tab
   swaps Neuzeit Grotesk Regular for Bold, and the longest label ("Turn happy
   customers into your marketing") goes from 272px to 285px. Add the 11px
   padding either side, the 32px icon and the 12px gap and the column has to be
   351px for that label to hold one line while selected; 360 leaves a little
   room for a font that renders wider elsewhere. Wider than this is panel width
   given away for nothing. Below 992px the list becomes a horizontal rail, so
   none of this applies there. */
.trx-tabs {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: start;
}
.trx-tabs__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.trx-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 6px 11px;
  cursor: pointer;
  font-family: "Neuzeit Grotesk Regular";
  font-size: 15.5px;
  color: var(--trx-sub);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.trx-tab:hover {
  background: var(--trx-bg2);
  color: var(--trx-ink);
}
.trx-tab.is-active {
  background: var(--trx-bg2);
  color: var(--trx-ink);
  font-family: "Neuzeit Grotesk Bold";
}
.trx-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--trx-bg2);
  color: var(--trx-ink);
  flex: none;
}
.trx-tab__icon svg {
  width: 18px;
  height: 18px;
}
.trx-panel {
  display: none;
}
.trx-panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  background: var(--trx-bg2);
  border: 1px solid var(--trx-line);
  border-radius: var(--trx-radius);
  padding: 44px;
  animation: trxFade 0.25s ease;
}
.trx-panel__eyebrow {
  display: inline-block;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trx-blue);
  margin-bottom: 14px;
}
.trx-panel__title {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--trx-ink);
  margin: 0 0 14px;
}
.trx-panel__desc {
  font-family: "Neuzeit Grotesk Regular";
  font-size: 18px;
  line-height: 1.55;
  color: var(--trx-sub);
  margin: 0 0 24px;
}
.trx-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.trx-panel__list li {
  position: relative;
  padding-left: 28px;
  font-family: "Neuzeit Grotesk Regular";
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--trx-ink);
}
.trx-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23002574'/%3E%3Cpath d='M5.8 10.4l2.6 2.6 5.2-5.6' stroke='white' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.trx-panel__media {
  background: #fff;
}
.trx-panel__media {
  margin: 0;
}
@media (max-width: 991px) {
  .trx-tabs {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .trx-tabs__nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .trx-tab {
    flex: 0 0 auto;
    width: auto;
    padding: 9px 12px;
    font-size: 15px;
  }
  .trx-tab__label {
    white-space: nowrap;
  }
  .trx-panel.is-active {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }
  .trx-panel__media {
    order: -1;
  }
}
@media (max-width: 576px) {
  .trx-panel.is-active {
    padding: 22px;
  }
  .trx-panel__title {
    font-size: 25px;
  }
  .trx-panel__desc {
    font-size: 17px;
  }
  .trx-tab__label {
    font-size: 14px;
  }
}
/* ====================================================
   FEATURE-TAB ANIMATED DEMOS (.trx-fx scenes)
   ==================================================== */
.trx-fx {
  position: relative;
  margin: 0;
  aspect-ratio: 4/3;
  background: #fff;
  border: 1px solid var(--trx-line);
  border-radius: var(--trx-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.trx-fx .fx {
  width: 100%;
  max-width: 280px;
}
.trx-fx b {
  font-family: "Neuzeit Grotesk Bold";
  font-weight: 400;
}
/* 1. Branded booking */
.fx-branded {
  position: relative;
}
.fx-bcard {
  background: #fff;
  border: 1px solid var(--trx-line);
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.fx-brow {
  display: flex;
  align-items: center;
  gap: 9px;
}
.fx-blogo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #1b74e4;
  flex: none;
}
.fx-bnm {
  display: flex;
  flex-direction: column;
}
.fx-bnm b {
  font-size: 12.5px;
  color: #1d1d1f;
}
.fx-bnm i {
  font-style: normal;
  font-size: 9.5px;
  color: #6e6e73;
}
.fx-bslots {
  display: flex;
  gap: 6px;
}
.fx-bslots span {
  flex: 1;
  text-align: center;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 10.5px;
  color: #6e6e73;
  background: #f5f5f7;
  border-radius: 7px;
  padding: 6px 0;
}
.fx-bslots span.on {
  background: #eaf2ff;
  color: #1b74e4;
  animation: fxPulse 2.6s ease-in-out infinite;
}
.fx-bbtn {
  background: #1b74e4;
  color: #fff;
  border-radius: 9px;
  padding: 9px;
  text-align: center;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 12px;
}
.fx-btoast {
  position: absolute;
  right: -4px;
  bottom: -12px;
  background: #16a34a;
  color: #fff;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 11px;
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.3);
  animation: fxAppear 2.8s ease-in-out infinite;
}
.fx-btoast::before {
  content: "✓ ";
}
/* 2. Live floor plan */
.fx-floor {
  max-width: 300px;
}
.fx-fhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fx-fhead b {
  font-size: 12px;
  color: #1d1d1f;
}
.fx-fcount {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 10px;
  color: #16a34a;
  background: #e7f6ec;
  border-radius: 999px;
  padding: 3px 9px;
}
.fx-fstage {
  position: relative;
  height: 138px;
  background: #f5f5f7;
  border: 1px solid var(--trx-line);
  border-radius: 10px;
}
.fx-ft {
  position: absolute;
  width: 13%;
  height: 17%;
  border-radius: 5px;
  background: #dfe7f5;
}
.fx-ft.seated {
  background: #16a34a;
}
.fx-ft.t1 {
  left: 7%;
  top: 12%;
}
.fx-ft.t2 {
  left: 40%;
  top: 10%;
}
.fx-ft.t3 {
  left: 74%;
  top: 12%;
}
.fx-ft.t4 {
  left: 20%;
  top: 44%;
}
.fx-ft.t5 {
  left: 50%;
  top: 46%;
}
.fx-ft.t6 {
  left: 78%;
  top: 44%;
}
.fx-ft.t7 {
  left: 14%;
  top: 76%;
}
.fx-ft.t8 {
  left: 58%;
  top: 76%;
}
.fx-ft.sel {
  animation: fxSeat 3.4s ease-in-out infinite;
}
.fx-fring {
  position: absolute;
  left: 20%;
  top: 44%;
  width: 13%;
  height: 17%;
  border-radius: 7px;
  border: 2px solid #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
  animation: fxRing 3.4s ease-in-out infinite;
}
.fx-flegend {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-family: "Neuzeit Grotesk Regular";
  font-size: 9.5px;
  color: #6e6e73;
}
.fx-flegend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fx-flegend .d {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}
.fx-flegend .d.g {
  background: #16a34a;
}
.fx-flegend .d.b {
  background: #dfe7f5;
}
/* 3. Auto-waitlist */
.fx-wait {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fx-whead {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 11px;
  color: #6e6e73;
  margin-bottom: 1px;
}
.fx-whead svg {
  width: 14px;
  height: 14px;
  color: #f59e0b;
}
.fx-wrow,
.fx-wseat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 11.5px;
  color: #1d1d1f;
  background: #fff;
  border: 1px solid var(--trx-line);
  border-radius: 10px;
  padding: 9px 11px;
}
.fx-wrow b,
.fx-wseat b {
  margin-left: auto;
  font-size: 10px;
  color: #6e6e73;
}
.fx-wd {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.fx-wd.a {
  background: #f59e0b;
}
.fx-wd.g {
  background: #16a34a;
}
.fx-wseat {
  border-color: #bfe6c8;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
  animation: fxAppear 3.2s ease-in-out infinite;
}
.fx-wseat .fx-wtick {
  color: #16a34a;
}
/* 4. Guest CRM */
.fx-crm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fx-cprof {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fx-cav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0a84ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 14px;
  flex: none;
}
.fx-cinfo {
  display: flex;
  flex-direction: column;
}
.fx-cinfo b {
  font-size: 13px;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fx-cvip {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #7a5b00;
  background: #fde9a8;
  border-radius: 999px;
  padding: 1px 6px;
}
.fx-cinfo i {
  font-style: normal;
  font-size: 10px;
  color: #6e6e73;
}
.fx-ctags {
  display: flex;
  gap: 6px;
}
.fx-ctags span {
  font-family: "Neuzeit Grotesk Regular";
  font-size: 9px;
  color: #6e6e73;
  background: #f5f5f7;
  border-radius: 6px;
  padding: 4px 8px;
}
.fx-chrow {
  font-family: "Neuzeit Grotesk Regular";
  font-size: 11px;
  color: #6e6e73;
  background: #f5f5f7;
  border-radius: 8px;
  padding: 7px 10px;
}
.fx-chnew {
  color: #1d1d1f;
  background: #eaf2ff;
  animation: fxAppear 3.2s ease-in-out infinite;
}
/* 5. VIP */
.fx-vip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.fx-vrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--trx-line);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
}
.fx-vav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #6e6e73;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 13px;
  flex: none;
}
.fx-vinfo {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fx-vinfo b {
  font-size: 13px;
  color: #1d1d1f;
}
.fx-vinfo i {
  font-style: normal;
  font-size: 10px;
  color: #6e6e73;
}
.fx-vbadge {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 10px;
  color: #7a5b00;
  background: #fde9a8;
  border: 1px solid #f5cf63;
  border-radius: 999px;
  padding: 4px 9px;
  flex: none;
  animation: fxVip 3s ease-in-out infinite;
}
.fx-vnote {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 10.5px;
  color: #16a34a;
  background: #e7f6ec;
  border-radius: 999px;
  padding: 5px 12px;
  animation: fxAppear 3s ease-in-out infinite 0.3s;
}
.fx-vnote::before {
  content: "★ ";
  color: #f5a623;
}
/* 6. Messaging */
.fx-msg {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fx-bub {
  max-width: 88%;
  font-family: "Neuzeit Grotesk Regular";
  font-size: 11px;
  line-height: 1.35;
  color: #fff;
  background: #1b74e4;
  border-radius: 14px 14px 14px 4px;
  padding: 8px 11px;
  opacity: 0;
}
.fx-bub .fx-bk {
  font-size: 8px;
  margin-left: 5px;
  opacity: 0.85;
}
.fx-bub.b1 {
  animation: fxAppear 5s ease-in-out infinite;
}
.fx-bub.b2 {
  animation: fxAppear 5s ease-in-out infinite 1s;
}
.fx-bub.b3 {
  align-self: flex-end;
  background: #e9e9ee;
  color: #1d1d1f;
  border-radius: 14px 14px 4px 14px;
  min-width: 38px;
  text-align: center;
  animation: fxAppear 5s ease-in-out infinite 2s;
}
.fx-bub.b3 .fx-bk {
  color: #34b233;
  opacity: 1;
}
/* 7. Reviews */
.fx-rvcard {
  background: #fff;
  border: 1px solid var(--trx-line);
  border-radius: 12px;
  padding: 13px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fx-rvtop {
  display: flex;
  align-items: center;
  gap: 9px;
}
.fx-rvg {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--trx-line);
  color: #4285f4;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-rstars {
  display: inline-flex;
  gap: 2px;
}
.fx-rstars i {
  font-style: normal;
  font-size: 15px;
  color: #d8d8de;
  transform: scale(0.5);
  opacity: 0.4;
  animation: fxStarLoop 4s ease-in-out infinite;
}
.fx-rstars i:nth-child(1) {
  animation-delay: 0.2s;
}
.fx-rstars i:nth-child(2) {
  animation-delay: 0.4s;
}
.fx-rstars i:nth-child(3) {
  animation-delay: 0.6s;
}
.fx-rstars i:nth-child(4) {
  animation-delay: 0.8s;
}
.fx-rstars i:nth-child(5) {
  animation-delay: 1s;
}
.fx-rvtxt {
  font-family: "Neuzeit Grotesk Regular";
  font-size: 11px;
  color: #1d1d1f;
}
.fx-rvreply {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--trx-line);
  padding-top: 8px;
}
.fx-rvreply b {
  font-size: 10px;
  color: #0a84ff;
  flex: none;
}
.fx-rvtype {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: #eef0f3;
  flex: 1;
  overflow: hidden;
}
.fx-rvtype::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #cfe0fb;
  border-radius: 4px;
  animation: fxType 4s ease-in-out infinite;
}
/* 8. Multi-location (switch restaurant) */
.fx-loc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fx-lhead {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6e6e73;
}
.fx-lmenu {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fx-litem {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 12px;
  border: 1px solid var(--trx-line);
  border-radius: 10px;
  padding: 8px 11px;
  background: #fff;
  color: #1d1d1f;
  animation: fxLoc 4.2s ease-in-out infinite;
}
.fx-litem.r2 {
  animation-delay: -1.4s;
}
.fx-litem.r3 {
  animation-delay: -2.8s;
}
.fx-lav {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9px;
  background: #e6ebf3;
  color: #6e6e73;
  flex: none;
  animation: fxLocAv 4.2s ease-in-out infinite;
}
.fx-litem.r2 .fx-lav {
  animation-delay: -1.4s;
}
.fx-litem.r3 .fx-lav {
  animation-delay: -2.8s;
}
.fx-lcheck {
  margin-left: auto;
  font-size: 11px;
  opacity: 0;
  animation: fxLocChk 4.2s ease-in-out infinite;
}
.fx-litem.r2 .fx-lcheck {
  animation-delay: -1.4s;
}
.fx-litem.r3 .fx-lcheck {
  animation-delay: -2.8s;
}
/* 9. Policies & deposits */
.fx-pol {
  position: relative;
}
.fx-pcard {
  background: #fff;
  border: 1px solid var(--trx-line);
  border-radius: 13px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fx-prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 12px;
  color: #1d1d1f;
}
.fx-prow.sub {
  font-size: 11px;
  color: #6e6e73;
}
.fx-prow.sub b {
  color: #1d1d1f;
}
.fx-ptg {
  width: 36px;
  height: 21px;
  border-radius: 999px;
  background: #16a34a;
  position: relative;
}
.fx-ptg::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
}
.fx-pamt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 12px;
  color: #1d1d1f;
  background: #f5f5f7;
  border-radius: 9px;
  padding: 8px 10px;
}
.fx-pcardicon {
  color: #0a84ff;
  display: flex;
}
.fx-pcardicon svg {
  width: 18px;
  height: 18px;
}
.fx-pconf {
  position: absolute;
  right: -4px;
  bottom: -12px;
  background: #16a34a;
  color: #fff;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 11px;
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.3);
  animation: fxAppear 3s ease-in-out infinite;
}
.fx-pconf::before {
  content: "✓ ";
}
/* 10. Calendar view */
.fx-calv {
  max-width: 290px;
}
.fx-cvhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.fx-cvhead b {
  font-size: 12px;
  color: #1d1d1f;
}
.fx-cvtoggle {
  display: flex;
  background: #f0f0f3;
  border-radius: 8px;
  padding: 2px;
}
.fx-cvtoggle span {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 9px;
  color: #6e6e73;
  padding: 4px 8px;
  border-radius: 6px;
}
.fx-cvtoggle .s1 {
  animation: fxSeg 4.2s ease-in-out infinite;
}
.fx-cvtoggle .s2 {
  animation: fxSeg 4.2s ease-in-out infinite -1.4s;
}
.fx-cvtoggle .s3 {
  animation: fxSeg 4.2s ease-in-out infinite -2.8s;
}
.fx-cvgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.fx-cvc {
  position: relative;
  aspect-ratio: 1;
  border-radius: 5px;
  background: #f5f5f7;
}
.fx-cvc i {
  position: absolute;
  right: 2px;
  top: 2px;
  font-style: normal;
  font-size: 7px;
  font-family: "Neuzeit Grotesk Bold";
  color: #fff;
  background: #1b74e4;
  border-radius: 999px;
  min-width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}
.fx-cvc.sel {
  background: #eaf2ff;
  box-shadow: 0 0 0 2px #1b74e4 inset;
  animation: fxPulse 2.4s ease-in-out infinite;
}
/* 11. Closing days */
.fx-close {
  max-width: 250px;
}
.fx-clhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.fx-clhead b {
  font-size: 12px;
  color: #1d1d1f;
}
.fx-cltag {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 9.5px;
  color: #e0413f;
  background: #fde7e7;
  border-radius: 999px;
  padding: 3px 9px;
  animation: fxAppear 3.6s ease-in-out infinite;
}
.fx-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.fx-clc {
  aspect-ratio: 1;
  border-radius: 5px;
  background: #f0f0f3;
  position: relative;
}
.fx-clc.rng {
  background: #fde7e7;
  animation: fxAppear 3.6s ease-in-out infinite;
}
.fx-clc.rng:nth-child(12) {
  animation-delay: 0.12s;
}
.fx-clc.rng:nth-child(13) {
  animation-delay: 0.24s;
}
.fx-clc.rng::before,
.fx-clc.rng::after {
  content: "";
  position: absolute;
  inset: 36% 24%;
  border-top: 2px solid #e0413f;
}
.fx-clc.rng::before {
  transform: rotate(45deg);
}
.fx-clc.rng::after {
  transform: rotate(-45deg);
}
/* 12. Real-time sync */
.fx-sync {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fx-sgroup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.fx-sdev {
  background: #1d1d1f;
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
}
.fx-sphone {
  width: 34px;
  height: 56px;
}
.fx-stab {
  width: 66px;
  height: 48px;
}
.fx-sdev i {
  width: 60%;
  height: 4px;
  border-radius: 2px;
  background: #3a3a42;
  animation: fxRow 2.4s ease-in-out infinite;
}
.fx-ssync {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #0a84ff;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
}
.fx-ssync svg {
  width: 24px;
  height: 24px;
  display: block;
  animation: fxSpin 2.6s linear infinite;
}
.fx-sping {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  margin-top: -4px;
  animation: fxPing 2.4s ease-in-out infinite;
}
.fx-supd {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 10px;
  color: #16a34a;
}
.fx-supd::before {
  content: "✓ ";
}
/* 13. SMS campaigns */
.fx-camp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  max-width: 230px;
}
.fx-cfilters {
  display: flex;
  gap: 6px;
}
.fx-cfilters span {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 9px;
  color: #ec4899;
  background: #fdeaf3;
  border-radius: 999px;
  padding: 4px 9px;
}
.fx-cmbody {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 54px;
}
.fx-mega {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #fdeaf3;
  color: #ec4899;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-mega svg {
  width: 26px;
  height: 26px;
}
.fx-fly {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #ec4899;
  opacity: 0;
  animation: fxFly 2.4s ease-in infinite;
}
.fx-fly.f2 {
  animation-delay: 0.5s;
}
.fx-fly.f3 {
  animation-delay: 1s;
}
.fx-cbar {
  width: 100%;
  height: 7px;
  border-radius: 4px;
  background: #f0f0f3;
  overflow: hidden;
}
.fx-cbar i {
  display: block;
  height: 100%;
  width: 0;
  background: #ec4899;
  border-radius: 4px;
  animation: fxFill 3s ease-in-out infinite;
}
.fx-csent {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 10.5px;
  color: #6e6e73;
}
/* 14. Services & seatings */
.fx-serv {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fx-srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--trx-line);
  border-radius: 10px;
  padding: 9px 12px;
}
.fx-sname {
  font-family: "Neuzeit Grotesk Bold";
  font-size: 12px;
  color: #1d1d1f;
  display: flex;
  flex-direction: column;
}
.fx-sname i {
  font-style: normal;
  font-size: 9px;
  font-family: "Neuzeit Grotesk Regular";
  color: #6e6e73;
  margin-top: 2px;
}
.fx-tg {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d4d4dc;
  position: relative;
  flex: none;
  animation: fxTg 3.6s ease-in-out infinite;
}
.fx-tg::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  animation: fxTgKnob 3.6s ease-in-out infinite;
}
.fx-tg.t2,
.fx-tg.t2::after {
  animation-delay: 0.4s;
}
.fx-tg.t3,
.fx-tg.t3::after {
  animation-delay: 0.8s;
}
/* 15. Operating hours */
.fx-hours {
  display: flex;
  align-items: center;
  gap: 18px;
}
.fx-clock {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2.5px solid #1d1d1f;
  flex: none;
}
.fx-clock i {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: #1d1d1f;
  border-radius: 2px;
}
.fx-clock .fx-h {
  width: 3px;
  height: 16px;
  margin-left: -1.5px;
  animation: fxSpin 6s linear infinite;
}
.fx-clock .fx-m {
  width: 2px;
  height: 23px;
  margin-left: -1px;
  animation: fxSpin 1.5s linear infinite;
}
.fx-clock .fx-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  margin: -3px 0 0 -3px;
}
.fx-hrows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.fx-hrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Neuzeit Grotesk Bold";
  font-size: 11px;
  color: #1d1d1f;
}
.fx-hrow span {
  font-family: "Neuzeit Grotesk Regular";
  font-size: 10px;
  color: #6e6e73;
}
.fx-hrow b {
  width: 26px;
}
.fx-hopen {
  margin-left: auto;
  font-style: normal;
  font-size: 9px;
  color: #16a34a;
  background: #e7f6ec;
  border-radius: 999px;
  padding: 3px 8px;
  animation: fxPulse 2.2s ease-in-out infinite;
}
.fx-hrow.off span {
  color: #e0413f;
}
.fx-hclosed {
  margin-left: auto;
  font-style: normal;
  font-size: 9px;
  color: #e0413f;
  background: #fde7e7;
  border-radius: 999px;
  padding: 3px 8px;
}
.trx-fx.app-fx {
  aspect-ratio: auto;
}
.reservations-hero__btn,
.reservations-channels__btn,
.reservations-cta__btn,
.ordering-btn,
.ordering-btn--demo,
.crm-hero__btn,
.crm-features__cta,
.crm-cta__btn,
.ireview-local-hero__btn,
.ireview-local-demo-btn,
.sendbat-btn,
.sendbat-demo-btn {
  border-radius: 5px;
}
.reservations-hero__actions,
.ordering-hero__actions,
.ordering-pass__actions,
.crm-hero__actions,
.ireview-hero__actions,
.ireview-local-hero__actions,
.sendbat-hero__actions {
  gap: 4px;
}
.btn,
.home-hero__btn,
.pb-btn,
.chat-btn,
.sendbat-btn,
.ordering-btn:not(.ordering-btn--demo),
.reservations-hero__btn,
.reservations-channels__btn,
.reservations-cta__btn,
.crm-hero__btn,
.crm-features__cta,
.crm-cta__btn,
.ireview-local-hero__btn {
  font-size: 14px;
  line-height: 20px;
  padding: 10px 16px;
  border-radius: 8px;
}

.app-fx {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-fx__card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.app-fx__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}
.app-fx__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: #e2e2e6;
}
.app-fx__dot:nth-child(1) {
  background: #ff5f57;
}
.app-fx__dot:nth-child(2) {
  background: #febc2e;
}
.app-fx__dot:nth-child(3) {
  background: #28c840;
}
.app-fx__tab {
  margin-left: 8px;
  min-width: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #707070;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-fx__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 18px 18px 20px;
  min-height: 214px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.app-fx__chip {
  align-self: center;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.app-fx__chip--blue {
  color: #1f6fd6;
  background: rgba(31, 111, 214, 0.12);
}
.app-fx__chip--amber {
  color: #b7791f;
  background: rgba(240, 160, 32, 0.16);
}
.app-fx__chip--green {
  color: #1a8f4c;
  background: rgba(26, 143, 76, 0.14);
}
.app-fx__li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  background: #f7f7f9;
  animation: app-fx-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__li:nth-child(2) {
  animation-delay: 0.09s;
}
.app-fx__li:nth-child(3) {
  animation-delay: 0.18s;
}
.app-fx__ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #00b4e5;
  background: rgba(0, 180, 229, 0.14);
}
.app-fx__liw {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.app-fx__liw b {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}
.app-fx__liw i {
  font-size: 11px;
  font-style: normal;
  color: #707070;
}
.app-fx__card--board .app-fx__body {
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-height: 0;
}
.app-fx__card--board .app-fx__col {
  flex: 0 0 auto;
}
.app-fx__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border-radius: 10px;
  background: #f5f5f7;
}
.app-fx__colhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #707070;
}
.app-fx__ccard {
  padding: 8px 9px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #f5f5f5;
  font-size: 11px;
  line-height: 1.25;
  color: #000000;
  animation: app-fx-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__col:nth-child(2) .app-fx__ccard {
  animation-delay: 0.08s;
}
.app-fx__col:nth-child(3) .app-fx__ccard {
  animation-delay: 0.16s;
}
.app-fx__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.app-fx__chart-head b {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
}
.app-fx__bars {
  height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.app-fx__bars span {
  flex: 1 1 0;
  height: var(--h);
  border-radius: 6px 6px 0 0;
  background: #e6e6ec;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: app-fx-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__bars span:nth-child(2) {
  animation-delay: 0.06s;
}
.app-fx__bars span:nth-child(3) {
  animation-delay: 0.12s;
}
.app-fx__bars span:nth-child(4) {
  animation-delay: 0.18s;
  background: #00b4e5;
}
.app-fx__bars span:nth-child(5) {
  animation-delay: 0.24s;
}
.app-fx__bars span:nth-child(6) {
  animation-delay: 0.3s;
}
.app-fx__days {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.app-fx__days i {
  flex: 1 1 0;
  text-align: center;
  font-size: 11px;
  font-style: normal;
  color: #707070;
}
.app-fx__cal-wk {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 2px;
}
.app-fx__cal-wk span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #707070;
}
.app-fx__cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  animation: app-fx-rise 0.45s ease both;
}
.app-fx__d {
  aspect-ratio: 1;
  border-radius: 6px;
  background: #f1f1f4;
  position: relative;
}
.app-fx__d--ev::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #00b4e5;
}
.app-fx__d--today {
  background: #00b4e5;
  animation: app-fx-pulse 2.4s ease-in-out infinite;
}
.app-fx__ck {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 2px;
  animation: app-fx-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__ck:nth-child(2) {
  animation-delay: 0.1s;
}
.app-fx__ck:nth-child(3) {
  animation-delay: 0.2s;
}
.app-fx__ck:nth-child(4) {
  animation-delay: 0.3s;
}
.app-fx__ck-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  background: #00b4e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") no-repeat center/14px;
}
.app-fx__ck-txt {
  font-size: 14px;
  color: #000000;
}
.app-fx__sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 8px 0 4px;
  animation: app-fx-rise 0.45s ease both;
}
.app-fx__sig-val {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #000000;
}
.app-fx__sig-val small {
  font-size: 18px;
  font-weight: 600;
  color: #707070;
  margin-left: 2px;
}
.app-fx__sig-cap {
  font-size: 13px;
  color: #00b4e5;
  font-weight: 600;
}
.app-fx__level {
  height: 9px;
  border-radius: 999px;
  background: #ececf0;
  overflow: hidden;
  margin-top: 8px;
}
.app-fx__level span {
  display: block;
  height: 100%;
  width: 82%;
  border-radius: 999px;
  background: #00b4e5;
  animation: app-fx-fill 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__ticks {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.app-fx__ticks span {
  flex: 1 1 0;
  height: 18px;
  border-radius: 4px;
  background: #f0f0f3;
}
.app-fx__ticks span:nth-child(2), .app-fx__ticks span:nth-child(4) {
  height: 26px;
}
.app-fx__ticks span:nth-child(3) {
  height: 32px;
  background: rgba(0, 180, 229, 0.4);
}
@media (max-width: 991px) {
  .app-fx {
    margin-block: 10px;
  }
  .app-fx__card {
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-fx__li,
  .app-fx__ccard,
  .app-fx__ck,
  .app-fx__cal,
  .app-fx__sig,
  .app-fx__bars span,
  .app-fx__level span {
    animation: none !important;
  }
  .app-fx__bars span {
    transform: none;
  }
  .app-fx__d--today {
    animation: none !important;
  }
}


.reservations-personalize {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-bottom: 40px;
}
.reservations-personalize__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  text-align: center;
}
/* This header uses .k-h2 / .k-lede too: see the note on the explorer header. */
.reservations-personalize__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(257px, auto) minmax(281px, auto) minmax(218px, auto);
  gap: 20px;
}
.reservations-personalize__card {
  background: #f5f5f7;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  padding: 27px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.reservations-personalize__card--theme {
  grid-column: 1/span 3;
  grid-row: 1;
}
.reservations-personalize__card--font {
  grid-column: 1/span 3;
  grid-row: 2;
}
.reservations-personalize__card--screen {
  grid-column: 1/span 3;
  grid-row: 3;
}
.reservations-personalize__card--alerts-tall {
  grid-column: 4/span 3;
  grid-row: 1/span 2;
  justify-content: space-between;
}
.reservations-personalize__card--alerts {
  grid-column: 4/span 3;
  grid-row: 3;
  justify-content: space-between;
}
.reservations-personalize__demo {
  width: 100%;
}
.reservations-personalize__demo--theme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.reservations-personalize__demo--font {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 0;
}
.reservations-personalize__demo--screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 0;
}
.reservations-personalize__mini-app {
  width: 210px;
  aspect-ratio: 210/131.25;
  background: #ffffff;
  border: 1px solid #e8e8ed;
  border-radius: 14px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.reservations-personalize__mini-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
}
.reservations-personalize__mini-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00b2e3;
  flex: none;
}
.reservations-personalize__mini-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #e3e3e8;
  width: 100%;
}
.reservations-personalize__mini-bar--title {
  height: 10px;
  width: 104px;
  background: #c9c9d2;
}
.reservations-personalize__mini-bar--short {
  width: 130px;
}
.reservations-personalize__mini-cta {
  display: block;
  margin-top: 14px;
  width: 86px;
  height: 24px;
  border-radius: 8px;
  background: #e9f2ff;
}
.reservations-personalize__toggle {
  position: relative;
  width: 66px;
  height: 33px;
  flex: none;
  border-radius: 999px;
  background: #e6e6ec;
  border: 1px solid #e8e8ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
}
.reservations-personalize__toggle-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.reservations-personalize__toggle-sun {
  width: 15px;
  height: 15px;
  position: relative;
}
.reservations-personalize__toggle-moon {
  width: 12px;
  height: 12px;
  position: relative;
}
.reservations-personalize__sample {
  font-family: "Neuzeit Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24.5px;
  line-height: 1;
  color: #1d1d1f;
  text-align: center;
}
.reservations-personalize__slider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.reservations-personalize__slider-min, .reservations-personalize__slider-max {
  font-family: "Neuzeit Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #6e6e73;
  line-height: 1;
}
.reservations-personalize__slider-min {
  font-size: 16px;
}
.reservations-personalize__slider-max {
  font-size: 30px;
}
.reservations-personalize__slider-track {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 5px;
  border-radius: 3px;
  background: #d4d4dc;
}
.reservations-personalize__slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: 3px;
  background: #00b2e3;
}
.reservations-personalize__slider-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e8e8ed;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.reservations-personalize__segments {
  width: 100%;
  display: flex;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e8e8ed;
  border-radius: 5px;
  padding: 5px;
}
.reservations-personalize__segment {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px 9px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #6e6e73;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.reservations-personalize__segment:hover:not(.is-active) {
  color: #1d1d1f;
  background: #f5f5f7;
}
.reservations-personalize__segment.is-active {
  background: #00b2e3;
  color: #ffffff;
  font-weight: 700;
}
.reservations-personalize__notifications {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reservations-personalize__notification {
  background: #ffffff;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.reservations-personalize__notification:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 180, 229, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.reservations-personalize__notification-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e8e8ed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reservations-personalize__notification-icon img {
  width: 26px;
  height: 26px;
}
.reservations-personalize__notification-body {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reservations-personalize__notification-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.reservations-personalize__notification-top strong {
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
  color: #1d1d1f;
}
.reservations-personalize__notification-top em {
  font-style: normal;
  font-size: 13px;
  line-height: 19.5px;
  color: #6e6e73;
}
.reservations-personalize__notification-sub {
  font-size: 13px;
  line-height: 19.5px;
  color: #6e6e73;
}
.reservations-personalize__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reservations-personalize__caption h3 {
  font-size: 19px;
  line-height: 22.8px;
  font-weight: 400;
  color: #1d1d1f;
}
.reservations-personalize__caption p {
  font-size: 14.5px;
  line-height: 21px;
  color: #6e6e73;
}
.reservations-personalize__caption h3,
.reservations-personalize__caption p {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.reservations-personalize__caption h3.is-swapping,
.reservations-personalize__caption p.is-swapping {
  opacity: 0;
  transform: translateY(4px);
}
@media (max-width: 940px) {
  .reservations-personalize__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .reservations-personalize__card {
    min-width: 0;
  }
  .reservations-personalize__card--theme, .reservations-personalize__card--font, .reservations-personalize__card--screen, .reservations-personalize__card--alerts-tall, .reservations-personalize__card--alerts {
    grid-column: auto;
    grid-row: auto;
  }
}
@media (max-width: 480px) {
  .reservations-personalize__card {
    padding-left: 10px;
    padding-right: 10px;
  }
  .reservations-personalize__segment {
    padding: 8px 4px 9px;
    font-size: 12.5px;
  }
  .reservations-personalize__segment.is-active {
    background: transparent;
    color: #00b2e3;
  }
}

/* ==========================================================================
   Responsive corrections (ours, not part of the port)

   The ported rules above are left byte-for-byte as they came from the previous
   site. These overrides sit after them and only take effect on narrow screens,
   where the original had a couple of genuine defects, most notably a 48px
   section title with `white-space: nowrap`, which pushes ~630px of text past
   the viewport on a phone. Desktop rendering is untouched.
   ========================================================================== */

@media (max-width: 940px) {
  /* Tabs become a horizontal rail above the panel instead of a side column. */
  .trx-tabs {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .trx-tabs__nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .trx-tabs__nav::-webkit-scrollbar { display: none; }
  .trx-tab {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    border: 1px solid #e8e8ed;
  }
  .trx-panel.is-active {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .trx-panel__media { order: -1; }
}

@media (max-width: 768px) {
  .reservations-features__actions { flex-wrap: wrap; justify-content: center; }
  .reservations-personalize__grid { grid-template-columns: 1fr; }
  .reservations-personalize__card,
  .reservations-personalize__card--theme,
  .reservations-personalize__card--font,
  .reservations-personalize__card--screen,
  .reservations-personalize__card--alerts,
  .reservations-personalize__card--alerts-tall {
    grid-column: auto;
    grid-row: auto;
  }
  /* The segment row is the one part that genuinely needs to scroll. */
  .reservations-personalize__segments {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .reservations-personalize__segments::-webkit-scrollbar { display: none; }
  .reservations-personalize__segment { white-space: nowrap; flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .app-fx__card { max-width: 100%; }
  .trx-panel__list li { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Flat pass. The brand direction dropped drop-shadows site-wide, so the depth
   the ported rules carried is removed here rather than by editing them.
   Borders and background tints keep the separation.
   -------------------------------------------------------------------------- */
.reservations-features [class*="fx"],
.reservations-features [class*="trx"],
.reservations-personalize,
.reservations-personalize * {
  box-shadow: none !important;
}
.app-fx__card { border: 1px solid #e8e8ed; }

/* ==========================================================================
   Mock kinds added for this build: sites, inbox, doc

   The ported explorer only had list/board/chart/calendar/check/signal, and
   every icon it did not recognise fell through to the customer list, which
   is why a "Multi-location" or "Canned responses" tab showed the same three
   rows as everything else. These three cover the archetypes that were
   missing, so a tab's mock matches the feature it is describing.
   ========================================================================== */

/* --- sites: per-location rollup --- */
.app-fx__site {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 11px;
  background: #f7f7f9;
  animation: app-fx-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__site:nth-child(2) { animation-delay: 0.09s; }
.app-fx__site:nth-child(3) { animation-delay: 0.18s; }
.app-fx__site-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  background: rgba(0, 180, 229, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b4e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") no-repeat center/13px;
}
.app-fx__site-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}
.app-fx__site-val {
  font-size: 12px;
  font-weight: 600;
  color: #00b4e5;
  white-space: nowrap;
}

/* --- inbox: a threaded conversation --- */
.app-fx__msg {
  max-width: 82%;
  padding: 9px 13px;
  font-size: 12.5px;
  line-height: 1.45;
  border-radius: 14px;
  animation: app-fx-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__msg:nth-child(2) { animation-delay: 0.09s; }
.app-fx__msg:nth-child(3) { animation-delay: 0.18s; }
.app-fx__msg--in {
  align-self: flex-start;
  background: #f2f2f4;
  color: #000000;
  border-bottom-left-radius: 5px;
}
.app-fx__msg--out {
  align-self: flex-end;
  background: #00b4e5;
  color: #ffffff;
  border-bottom-right-radius: 5px;
}

/* --- doc: a document or template preview --- */
.app-fx__doc {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: 11px;
  background: #f7f7f9;
  animation: app-fx-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-fx__doc-h {
  height: 11px;
  width: 46%;
  border-radius: 4px;
  background: #00b4e5;
  opacity: 0.75;
}
.app-fx__doc-l {
  height: 8px;
  border-radius: 4px;
  background: #e3e3e7;
}
.app-fx__doc-l--s { width: 72%; }
.app-fx__doc-l--m { width: 55%; }

/* ==========================================================================
   Panel height

   The panel was content-height, so every tab with more copy than the last
   resized the whole section and the page jumped under the cursor. It now
   fills the tab column's height and centres its content instead, which also
   lines the card up with the bottom of the tab list.
   ========================================================================== */
.trx-tabs { align-items: stretch; }

/* Every panel is laid into the same grid cell, so the wrapper is always as
   tall as the tallest panel and the box never resizes between tabs. Inactive
   panels are hidden with visibility rather than display:none: display:none
   would take them out of flow and the height would follow the active one
   again. The box styling moves here from .is-active for the same reason. */
.trx-tabs__panels { display: grid; }
.trx-panel {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  background: var(--trx-bg2);
  border: 1px solid var(--trx-line);
  border-radius: var(--trx-radius);
  padding: 44px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.trx-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: trxFade 0.25s ease;
}

@media (max-width: 940px) {
  .trx-panel { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Keyframes the port never carried across

   assets/css/feature-explorer.css referenced app-fx-grow, app-fx-rise and
   trxFade eleven times but defined none of them. Mostly that only cost the
   entrance motion, but the chart bars declare transform: scaleY(0) and rely
   on app-fx-grow to open, so with the animation dropped they were collapsed
   to nothing and the chart mock rendered as an empty box everywhere.
   ========================================================================== */
@keyframes app-fx-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes app-fx-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes trxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}