.icon-sprite {
  display: none;
}

.header26_image-wrapper.is-move-top {
  --stage-height: 580px;
  display: block;
}

.hero-visual {
  --desktop-scale: 0.66;
  /* Phone width stays about a third of the desktop window, matching the reference. */
  --phone-scale: calc(var(--desktop-scale) * 1.26);
  --desktop-width: calc(1440px * var(--desktop-scale));
  --phone-bezel: 14px;
  --phone-screen-radius: 36px;
  /* Border box: scaled screen, bezel on both sides, and the 1px border. */
  --phone-width: calc(390px * var(--phone-scale) + var(--phone-bezel) * 2 + 2px);
  /* How far the phone hangs off the desktop's left edge. */
  --hang: calc(var(--phone-width) * 0.3);
  --composition-width: calc(var(--desktop-width) + var(--hang));

  --primary-color: #117654;
  --primary-color-light: color-mix(in srgb, var(--primary-color) 70%, transparent);
  --primary-color-lighter: color-mix(in srgb, var(--primary-color) 50%, transparent);
  --primary-color-lightest: color-mix(in srgb, var(--primary-color) 10%, transparent);
  --surface-tint: color-mix(in srgb, var(--primary-color) 3%, #fff);
  --foreground: hsl(30 6% 25%);
  --muted-foreground: hsl(0 0% 45%);
  --secondary-foreground: hsl(24 10% 10%);
  --stone-900: hsl(24 10% 10%);
  --border: hsl(20 6% 90%);
  --input: hsl(20 6% 90%);
  --muted: hsl(60 5% 96%);
  --card: #ffffff;
  --alpha-4: hsl(24 10% 10% / 0.04);
  --success: hsl(142 76% 36%);
  --success-muted: hsl(155 86% 98%);
  --info: hsl(217 91% 60%);
  --info-muted: hsl(214 100% 97%);
  --processing: hsl(271 91% 65%);
  --processing-muted: hsl(270 100% 98%);
  --warning: hsl(32 95% 44%);

  /* High enough that the home UI under the cover stays in frame. */
  --phone-top: calc(24px + 1100px * var(--desktop-scale) * 0.12);
  position: relative;
  width: 100%;
  height: var(--stage-height);
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 55% 70% at 72% 42%,
      rgba(185, 251, 166, 0.22),
      transparent 72%
    ),
    var(--hero-bg, #f3eee6);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* Right edge of the desktop window dissolves into the hero background. */
.hero-visual::before {
  top: 0;
  right: 0;
  bottom: 0;
  width: 34%;
  background: linear-gradient(to right, rgba(243, 238, 230, 0), var(--hero-bg, #f3eee6) 88%);
}

.hero-visual::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(243, 238, 230, 0) 0%,
    rgba(243, 238, 230, 0.35) 42%,
    rgba(243, 238, 230, 0.82) 74%,
    var(--hero-bg, #f3eee6) 100%
  );
}

.hero-visual * {
  box-sizing: border-box;
}

.hero-visual svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Device frames */

.desktop-shell {
  --bezel: 14px;
  position: absolute;
  top: 24px;
  width: calc(1440px * var(--desktop-scale) + var(--bezel) * 2);
  height: calc(1100px * var(--desktop-scale) + var(--bezel) * 2);
  padding: var(--bezel);
  overflow: hidden;
  background: #f7f6f4;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 36px -22px rgba(18, 37, 35, 0.22);
  -webkit-mask-image:
    linear-gradient(to right, #000 82%, transparent 100%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 82%, transparent 100%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-composite: intersect;
}

.desktop-app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  width: 1440px;
  height: 1100px;
  overflow: hidden;
  background: var(--surface-tint);
  border-radius: calc(16px / var(--desktop-scale));
  color: var(--foreground);
  font-size: 14px;
  line-height: 20px;
  transform: scale(var(--desktop-scale));
  transform-origin: top left;
}

.phone-shell {
  position: absolute;
  top: var(--phone-top);
  z-index: 2;
  width: var(--phone-width);
  height: calc(844px * var(--phone-scale) + var(--phone-bezel) * 2 + 2px);
  padding: var(--phone-bezel);
  overflow: hidden;
  background: #f7f6f4;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: calc(var(--phone-screen-radius) + var(--phone-bezel) + 1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 36px -22px rgba(18, 37, 35, 0.22);
}

.mobile-app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 390px;
  height: 844px;
  overflow: hidden;
  background: #ffffff;
  border-radius: calc(var(--phone-screen-radius) / var(--phone-scale));
  color: var(--foreground);
  font-size: 14px;
  line-height: 20px;
  transform: scale(var(--phone-scale));
  transform-origin: top left;
}

/* VuiSidebar */

.ui-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ui-sidebar-header,
.ui-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.ui-sidebar-footer {
  margin-top: auto;
}

.ui-portal-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--foreground);
}

.ui-identity {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1;
}

.ui-identity-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-identity-subtitle {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px 8px;
}

.ui-group-label {
  margin-bottom: -2px;
  padding: 0 8px;
  color: hsl(30 6% 25% / 0.6);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.ui-menu-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  line-height: 20px;
}

.ui-menu-button.is-current {
  background: var(--primary-color-lightest);
  color: var(--primary-color);
  font-weight: 500;
}

.ui-menu-button.is-current::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--primary-color);
  border-radius: 6px 0 0 6px;
}

/* VuiAvatar */

.ui-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background: hsl(30 6% 25% / 0.1);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 12px;
  font-weight: 600;
}

.ui-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 16px;
}

/* Desktop home layout */

.ui-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 8px;
}

.ui-home-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

/* VuiHomeCover */

.ui-cover {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1) 50%, transparent),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=80");
  background-position: center;
  background-size: cover;
}

.ui-cover-desktop {
  height: 208px;
  border-radius: 8px;
}

.ui-cover-mobile {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.ui-cover-text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 24px 20px;
  color: #ffffff;
}

.ui-cover-mobile .ui-cover-text {
  padding: 8px 16px 20px;
}

.ui-cover-date {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1.26px;
  text-transform: uppercase;
}

.ui-cover-mobile .ui-cover-date {
  font-size: 12px;
  line-height: 20px;
}

.ui-cover-greeting {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.ui-cover-logo {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
}

.ui-cover-logo img {
  display: block;
  height: 22px;
  width: auto;
}

.ui-cover-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background-image: linear-gradient(
    to right,
    var(--primary-color) 0%,
    color-mix(in srgb, var(--primary-color), white 35%) 100%
  );
}

/* HomeCreateActions */

.ui-create-actions {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.ui-create-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 78px;
  padding: 6px 16px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ui-create-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ui-create-label {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}

.ui-create-subtitle {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 20px;
}

.ui-create-wedge {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 150%;
  aspect-ratio: 1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--primary-color) 16%, transparent) 0%,
    transparent 90%
  );
  transform: rotate(45deg) translateY(15%) translateX(55%);
  pointer-events: none;
}

.ui-create-action img {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 45px;
  object-fit: contain;
}

/* Scroll card holding Updates + Highlights */

.ui-scroll-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 0 24px 24px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* HomeSectionHeader */

.ui-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: -16px;
  padding: 16px 0;
}

.ui-section-header-mobile {
  margin-bottom: 0;
  padding: 0;
}

.ui-section-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hero-visual .ui-section-icon {
  width: 20px;
  height: 20px;
  color: var(--foreground);
}

.ui-section-title {
  color: var(--foreground);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

.ui-section-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

.ui-see-all {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  background: hsl(30 6% 25% / 0.05);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
}

.ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: hsl(24 10% 10% / 0.05);
  border-radius: 6px;
  color: var(--stone-900);
}

.ui-icon-16 {
  color: var(--muted-foreground);
}

/* VuiTag (outline) */

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.hero-visual .ui-tag svg {
  width: 12px;
  height: 12px;
}

.ui-tag-count {
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  background: var(--primary-color-lightest);
  border-color: var(--primary-color-lighter);
  border-radius: 999px;
  color: var(--primary-color);
  font-weight: 600;
}

.ui-tag-processing {
  background: var(--processing-muted);
  border-color: hsl(271 91% 65% / 0.2);
  color: var(--processing);
}

.ui-tag-info {
  background: var(--info-muted);
  border-color: hsl(217 91% 60% / 0.2);
  color: var(--info);
}

.ui-tag-success {
  background: var(--success-muted);
  border-color: hsl(142 76% 36% / 0.2);
  color: var(--success);
}

/* VuiVisitorStatusBadge */

.ui-visitor-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.ui-visitor-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--warning);
  border-radius: 999px;
}

/* UpdatesSection tray + HomeUpdateCard */

.ui-tray {
  display: flex;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  background: hsl(60 5% 96% / 0.4);
  border: 1px solid hsl(20 6% 90% / 0.7);
  border-radius: 16px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.ui-update-tile {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: 10px;
  width: 256px;
  padding: 8px;
  border-radius: 8px;
}

.ui-update-bar {
  flex-shrink: 0;
  width: 4px;
  background: var(--primary-color);
  border-radius: 999px;
}

.ui-update-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ui-update-eyebrow,
.ui-update-title,
.ui-update-subtitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-update-eyebrow {
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.ui-update-title {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.ui-update-subtitle {
  min-height: 20px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

/* HomeHighlights bento + VuiMediaSurfaceCard */

.ui-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 8px;
}

.ui-bento-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.ui-media-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--input);
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ui-media-fill {
  flex-direction: column;
  height: 100%;
}

.ui-media-inline {
  flex: 1;
  flex-direction: row;
  align-items: center;
  min-height: 0;
}

.ui-media {
  position: relative;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--alpha-4);
  background-position: center;
  background-size: cover;
  border-radius: 8px;
}

.ui-media-fill .ui-media {
  width: 100%;
}

.ui-media-inline .ui-media {
  height: 100%;
  max-width: 45%;
}

.ui-media-gym {
  background-image: url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=800&q=70");
}

.ui-media-cafe {
  background-image: url("https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=600&q=70");
}

.ui-media-bikes {
  background-image: url("https://images.unsplash.com/photo-1506521781263-d8422e82f27a?auto=format&fit=crop&w=600&q=70");
}

.ui-media-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ui-media-fill .ui-media-content {
  flex: 1;
  padding: 0 4px 4px;
}

.ui-media-inline .ui-media-content {
  flex: 1;
  justify-content: center;
}

.ui-media-title {
  overflow: hidden;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-media-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* DesktopRequests panel */

.ui-requests-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.ui-requests-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.ui-requests-title {
  color: var(--foreground);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.ui-requests-filters {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 0;
}

.ui-filter-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
}

.hero-visual .ui-filter-dropdown svg {
  width: 14px;
  height: 14px;
}

.ui-requests-list {
  display: flex;
  flex-direction: column;
  padding: 12px 8px 16px;
}

/* VuiListRow / VuiRequestCard / VuiVisitorCard */

.ui-list-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  color: var(--foreground);
}

.ui-list-row-panel {
  padding: 12px 8px;
  border-bottom: 1px solid var(--input);
  border-radius: 0;
}

.ui-list-row-card {
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.ui-leading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--alpha-4);
  border-radius: 8px;
  color: var(--muted-foreground);
}

.ui-row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ui-row-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 4px 0;
}

.ui-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-row-meta,
.ui-row-meta-start {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
}

.ui-row-meta > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-row-meta-split {
  justify-content: space-between;
  gap: 8px;
}

.hero-visual .ui-row-meta svg {
  width: 14px;
  height: 14px;
}

/* Mobile: status bar + VuiLargeTitleHeader */

.ui-status-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 32px 0 40px;
  color: var(--stone-900);
  font-size: 16px;
  font-weight: 600;
}

.ui-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-signal {
  width: 18px;
  height: 11px;
  background: linear-gradient(to right, var(--stone-900) 0 3px, transparent 3px 5px, var(--stone-900) 5px 8px, transparent 8px 10px, var(--stone-900) 10px 13px, transparent 13px 15px, var(--stone-900) 15px 18px);
  clip-path: polygon(0 75%, 18% 75%, 18% 55%, 45% 55%, 45% 30%, 72% 30%, 72% 0, 100% 0, 100% 100%, 0 100%);
}

.ui-battery {
  width: 25px;
  height: 12px;
  border: 1.5px solid hsl(24 10% 10% / 0.4);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 10px var(--stone-900);
}

.ui-top-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 16px;
  background: #ffffff;
}

.ui-header-control {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--alpha-4);
  border-radius: 999px;
  color: var(--foreground);
}

.hero-visual .ui-header-control svg {
  width: 20px;
  height: 20px;
}

.ui-top-bar-title {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-top-bar-title img {
  display: block;
  height: 28px;
  width: auto;
}

/* Mobile home */

.ui-mobile-home {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 16px;
}

.ui-mobile-pad {
  padding: 0 16px;
}

.ui-mobile-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}

.ui-tray-mobile {
  margin-right: -16px;
  border-right: 0;
  border-radius: 16px 0 0 16px;
}

.ui-mobile-carousel {
  display: flex;
  gap: 12px;
  margin-right: -16px;
  overflow: hidden;
}

.ui-mobile-carousel .ui-list-row-card {
  flex-shrink: 0;
  width: 85%;
}

.ui-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ui-carousel-dots span {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
}

.ui-carousel-dots span.is-current {
  width: 16px;
  background: var(--primary-color-light);
}

/* VuiTabBar + VuiBottomNavCreate */

.ui-bottom-nav {
  position: absolute;
  right: 16px;
  bottom: 28px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ui-tab-bar {
  position: relative;
  display: flex;
  flex: 1;
  padding: 6px;
  background: hsl(0 0% 100% / 0.6);
  border: 1px solid hsl(0 0% 100% / 0.6);
  border-radius: 999px;
  box-shadow:
    0 1px 2px 0 hsl(24 10% 10% / 0.06),
    0 8px 24px -6px hsl(24 10% 10% / 0.22),
    inset 0 1px 0 0 hsl(0 0% 100% / 0.65);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
}

.ui-tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 4);
  background: var(--primary-color-lightest);
  border-radius: 999px;
}

.ui-tab {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  color: var(--foreground);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.ui-tab.is-current {
  color: var(--primary-color);
  font-weight: 600;
}

.hero-visual .ui-tab svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

.hero-visual .ui-tab.is-current svg {
  stroke-width: 2;
}

.ui-create-button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--primary-color);
  border-radius: 999px;
  color: #ffffff;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.hero-visual .ui-create-button svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

/* Screens sit in the visual, phone in front at the left, desktop running off to the right. */

.hero-visual .desktop-shell {
  left: var(--hang);
}

.hero-visual .phone-shell {
  left: 0;
}

/* Composition: copy on the left, screens on the right, matching the reference hero. */

@media (min-width: 992px) {
  .section_header26 .header26_component {
    display: grid;
    grid-template-columns: minmax(17rem, 36rem) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: center;
    width: 100%;
  }

  .section_header26 .max-width-large.align-center {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .section_header26 .work_title.heading-style-h1 {
    text-align: left;
  }

  .section_header26 .work_text {
    max-width: 38ch;
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .section_header26 .header26_image-wrapper.is-move-top {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .section_header26 .work_text-wrapper {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    max-width: none;
    margin: 1.75rem 0 0;
    text-align: left;
    align-items: flex-start;
  }

  .section_header26 .work_text {
    text-align: left;
  }

  .hero-visual .desktop-shell {
    left: var(--hang);
  }

  .hero-visual .phone-shell {
    left: 0;
  }
}

@media (max-width: 1200px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 600px;
  }

  .hero-visual {
    --desktop-scale: 0.54;
  }
}

/* Keep the description and CTA above the fold: the stage shrinks with the viewport height. */
@media (min-width: 1201px) and (max-height: 1020px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 620px;
  }

  .hero-visual {
    --desktop-scale: 0.58;
  }
}

@media (min-width: 992px) and (max-height: 952px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 540px;
  }

  .hero-visual {
    --desktop-scale: 0.5;
  }
}

@media (min-width: 992px) and (max-height: 884px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 470px;
  }

  .hero-visual {
    --desktop-scale: 0.44;
  }
}

@media (min-width: 992px) and (max-height: 825px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 410px;
  }

  .hero-visual {
    --desktop-scale: 0.38;
  }
}

@media (min-width: 992px) and (max-height: 774px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 360px;
  }

  .hero-visual {
    --desktop-scale: 0.34;
  }
}

@media (min-width: 992px) and (max-height: 731px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 320px;
  }

  .hero-visual {
    --desktop-scale: 0.3;
  }
}

@media (max-width: 991px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 520px;
  }

  .hero-visual {
    --desktop-scale: 0.45;
  }
}

@media (max-width: 767px) {
  .header26_image-wrapper.is-move-top {
    --stage-height: 440px;
  }

  .hero-visual {
    --desktop-scale: 0.38;
  }

  .hero-visual .desktop-shell {
    left: 96px;
  }

  .hero-visual .phone-shell {
    left: 0;
  }
}

/* Hero craft: type, reveal, and the product settle. */

.section_header26 {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-bg: #f3eee6;
  background: var(--hero-bg);
}

.section_header26 ::selection {
  background: #117654;
  color: #fafaf9;
}

.section_header26 .work_title.heading-style-h1 {
  margin: 0;
  color: #1c1917;
  font-family: "Tomato Grotesk", Arial, sans-serif;
  font-size: 3.375rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: normal;
}

@media (max-width: 991px) {
  .section_header26 .work_title.heading-style-h1 {
    font-size: 2.375rem;
  }
}

.section_header26 .hero-line {
  display: block;
  overflow: hidden;
}

.section_header26 .hero-line > span {
  display: block;
  white-space: nowrap;
}

.section_header26 .work_text {
  color: rgba(28, 25, 23, 0.62);
}

.section_header26 .work_text-wrapper .cta {
  transition: transform 0.5s var(--ease-out-expo);
}

.section_header26 .work_text-wrapper .cta:hover {
  transform: translateY(-3px);
}

.section_header26 .work_text-wrapper .cta:focus-visible {
  outline: 2px solid #117654;
  outline-offset: 4px;
}

.desktop-shell {
  animation: hero-device 2.6s var(--ease-out-expo) 0.2s both;
}

.phone-shell {
  animation: hero-device 2.6s var(--ease-out-expo) 0.55s both;
}

@keyframes hero-rise {
  from {
    transform: translateY(110%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes hero-rise-soft {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-device {
  from {
    opacity: 0;
    transform: translateY(64px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section_header26 .hero-line > span,
  .section_header26 .work_text,
  .section_header26 .work_text-wrapper .cta,
  .desktop-shell,
  .phone-shell {
    animation: none;
  }
}

/* Service requests collage: phone chat with the request and rating overlapping it. */

.requests-collage {
  --ink: #44403c;
  --muted: #737373;
  --line: #e7e5e4;
  --u: calc(100cqw / 609);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 680 / 531;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(168deg, #f7f6f4 8%, #efece7 92%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.requests-collage svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rq-phone {
  position: absolute;
  top: calc(8% + calc(8 * var(--u)));
  left: 50%;
  z-index: 1;
  box-sizing: border-box;
  width: 54%;
  height: 116%;
  padding: calc(12 * var(--u));
  overflow: hidden;
  background: #f7f6f4;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: calc(40 * var(--u));
  transform: translateX(-50%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 calc(16 * var(--u)) calc(36 * var(--u)) -22px rgba(18, 37, 35, 0.22);
}

.rq-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: calc(30 * var(--u));
}

.rq-status {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: calc(32 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u)) 0 calc(22 * var(--u));
  color: #1c1917;
  font-size: calc(12 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.rq-status-glyphs {
  display: flex;
  gap: calc(5 * var(--u));
  align-items: center;
  justify-self: end;
}

.rq-signal {
  width: calc(14 * var(--u));
  height: calc(9 * var(--u));
  background:
    linear-gradient(#1c1917, #1c1917) left bottom / calc(2 * var(--u)) calc(4 * var(--u)) no-repeat,
    linear-gradient(#1c1917, #1c1917) calc(4 * var(--u)) bottom / calc(2 * var(--u)) calc(6 * var(--u)) no-repeat,
    linear-gradient(#1c1917, #1c1917) calc(8 * var(--u)) bottom / calc(2 * var(--u)) calc(8 * var(--u)) no-repeat,
    linear-gradient(rgba(28, 25, 23, 0.28), rgba(28, 25, 23, 0.28)) right bottom / calc(2 * var(--u)) calc(9 * var(--u)) no-repeat;
}

.rq-battery {
  box-sizing: border-box;
  width: calc(18 * var(--u));
  height: calc(9 * var(--u));
  padding: 1px;
  border: 1px solid rgba(28, 25, 23, 0.4);
  border-radius: calc(2.5 * var(--u));
}

.rq-battery > span {
  display: block;
  width: 72%;
  height: 100%;
  background: #1c1917;
  border-radius: 1px;
}

.rq-screen-title {
  flex-shrink: 0;
  padding: calc(2 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
  color: #44403c;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: calc(16 * var(--u));
  text-align: center;
}

.rq-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: calc(2 * var(--u)) calc(12 * var(--u)) 0;
  overflow: hidden;
}

.rq-bubble {
  display: flex;
  gap: calc(8 * var(--u));
  align-items: stretch;
  width: 100%;
}

.rq-bubble-out {
  justify-content: flex-end;
}

.rq-rail {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  width: calc(32 * var(--u));
}

.rq-avatar {
  display: block;
  flex-shrink: 0;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  overflow: hidden;
  border-radius: calc(999 * var(--u));
  background: #e7e5e4;
}

.rq-avatar img {
  display: block;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
}

.rq-avatar-team img {
  object-position: center 40%;
}

.rq-rail-line {
  width: 1px;
  flex: 1;
  min-height: calc(12 * var(--u));
  background: #e7e5e4;
}

.rq-thread {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  width: min(78%, calc(220 * var(--u)));
  padding-bottom: calc(12 * var(--u));
}

.rq-bubble-body {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border: 1px solid #e7e5e4;
  border-radius: calc(6 * var(--u));
  background: #fff;
}

.rq-bubble-out .rq-bubble-body {
  background: #ecf4f1;
  border-color: #d2dad6;
}

.rq-sender {
  color: #737373;
  font-size: calc(11 * var(--u));
  font-weight: 600;
  line-height: calc(16 * var(--u));
}

.rq-bubble-out .rq-sender,
.rq-bubble-out .rq-time {
  text-align: right;
}

.rq-text {
  color: #44403c;
  font-size: calc(12 * var(--u));
  font-weight: 400;
  line-height: calc(16 * var(--u));
  word-break: normal;
  overflow-wrap: break-word;
}

.rq-caption {
  color: #737373;
  font-size: calc(11 * var(--u));
  font-weight: 400;
  line-height: calc(14 * var(--u));
}

.rq-time {
  color: #737373;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: calc(14 * var(--u));
}

.rq-photo {
  display: block;
  width: 100%;
  height: calc(76 * var(--u));
  margin-top: calc(2 * var(--u));
  border-radius: calc(5 * var(--u));
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent 40%),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=800&h=360&q=70")
      center 28% / cover;
}

.rq-log {
  display: flex;
  gap: calc(6 * var(--u));
  align-items: flex-start;
  padding: 0 calc(2 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
  color: #737373;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: calc(16 * var(--u));
}

.rq-log-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rq-log strong {
  color: #44403c;
  font-weight: 600;
}

.rq-log-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: calc(999 * var(--u));
  background: #fff;
  color: #737373;
}

.rq-log-icon svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.rq-log-time {
  display: flex;
  gap: calc(4 * var(--u));
  align-items: center;
}

.rq-dot {
  margin: 0;
}

.rq-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: calc(72 * var(--u));
  background: linear-gradient(to bottom, rgba(239, 236, 231, 0), rgba(239, 236, 231, 0.8) 55%, #efece7);
  pointer-events: none;
}

.rq-request,
.rq-survey {
  position: absolute;
  z-index: 4;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: calc(12 * var(--u));
}

.rq-request {
  top: 2%;
  left: 2.5%;
  display: flex;
  gap: calc(12 * var(--u));
  align-items: flex-start;
  width: min(calc(384 * var(--u)), 62%);
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(14 * var(--u)) rgba(18, 37, 35, 0.12);
}

.rq-leading {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(28, 25, 23, 0.04);
  color: var(--muted);
}

.rq-request-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.rq-request-title {
  display: flex;
  gap: calc(12 * var(--u));
  align-items: center;
  justify-content: space-between;
  min-height: calc(32 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: calc(24 * var(--u));
}

.rq-request-title > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rq-badge {
  display: inline-flex;
  flex-shrink: 0;
  gap: calc(4 * var(--u));
  align-items: center;
  height: calc(20 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: calc(6 * var(--u));
  background: #faf5ff;
  color: #a855f7;
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.rq-badge svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.rq-meta {
  display: flex;
  gap: calc(4 * var(--u));
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: calc(24 * var(--u));
  white-space: nowrap;
}

.rq-meta-split {
  justify-content: space-between;
}

.rq-meta-split > span:first-child {
  display: flex;
  gap: calc(4 * var(--u));
  align-items: center;
  min-width: 0;
}

.rq-survey {
  top: auto;
  right: 2.5%;
  bottom: calc(20 * var(--u));
  left: auto;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  width: min(calc(248 * var(--u)), 38%);
  padding: calc(16 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) -18px rgba(18, 37, 35, 0.28);
}

.rq-survey-title {
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: calc(24 * var(--u));
}

.rq-emojis {
  display: flex;
  gap: calc(4 * var(--u));
  line-height: 1;
}

.rq-emojis span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(999 * var(--u));
  font-size: calc(22 * var(--u));
}

.rq-emojis .is-picked {
  background: #f5f5f4;
}

.rq-survey {
  overflow: visible;
}

.rq-survey-title {
  display: grid;
}

.rq-survey-title > span {
  grid-area: 1 / 1;
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rq-title-thanks {
  opacity: 0;
  transform: translateY(calc(6 * var(--u)));
}

.requests-collage.is-thanked .rq-title-ask {
  opacity: 0;
  transform: translateY(-6px);
}

.requests-collage.is-thanked .rq-title-thanks {
  opacity: 1;
  transform: none;
}

.rq-emojis > span {
  transition:
    background-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 360ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 360ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rq-emoji-best {
  position: relative;
}

.rq-emoji-face {
  position: relative;
  z-index: 1;
  display: block;
}

.requests-collage .rq-emoji-best.is-hovered {
  background: #f5f5f4;
}

.requests-collage.is-rated .rq-emoji-best {
  background: color-mix(in srgb, #117654 14%, #fff);
  transform: none;
}

.requests-collage.is-rated .rq-emojis > span:not(.rq-emoji-best) {
  opacity: 0.4;
  filter: grayscale(0.7);
}

.requests-collage.is-rated .rq-emoji-face {
  animation: rq-emoji-pop 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rq-emoji-ring {
  position: absolute;
  inset: 0;
  border: calc(2 * var(--u)) solid #117654;
  border-radius: calc(999 * var(--u));
  opacity: 0;
  pointer-events: none;
}

.requests-collage.is-rated .rq-emoji-ring {
  animation: rq-emoji-ring 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rq-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rq-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin: -3px 0 0 -3px;
  border-radius: calc(999 * var(--u));
  background: #117654;
  opacity: 0;
}

.rq-burst i:nth-child(4n + 2) {
  background: #dcb337;
}

.rq-burst i:nth-child(4n + 3) {
  width: calc(4 * var(--u));
  height: calc(9 * var(--u));
  margin: -4.5px 0 0 -2px;
  background: #3b82f6;
}

.rq-burst i:nth-child(4n + 4) {
  background: #d63f3f;
}

.requests-collage.is-rated .rq-burst i {
  animation: rq-burst-fly 720ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}

@keyframes rq-emoji-pop {
  0% { transform: scale(1); }
  35% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes rq-emoji-ring {
  0% { opacity: 0.7; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.9); }
}

@keyframes rq-burst-fly {
  0% {
    opacity: 1;
    transform: rotate(var(--burst-angle)) translateY(0) scale(0.4);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--burst-angle)) translateY(-30px) scale(1);
  }
}

.rq-cursor {
  --cursor-size: calc(52 * var(--u));
  --cursor-x: 0px;
  --cursor-y: 0px;
  --press: 1;
  --tip-x: calc(var(--cursor-size) * 11.1102 / 31.4644);
  --tip-y: calc(var(--cursor-size) * 9.44707 / 31.4644);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--cursor-x) - var(--tip-x)), calc(var(--cursor-y) - var(--tip-y))) scale(var(--press));
  transform-origin: 35.31% 27.6%;
  transition:
    transform 900ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.requests-collage.is-cursor-on .rq-cursor {
  opacity: 1;
}

.rq-cursor.is-pressing {
  --press: 0.86;
  transition:
    transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.requests-collage .rq-cursor svg {
  display: block;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  overflow: visible;
  fill: none;
  stroke: none;
}

@media (max-width: 767px) {
  .requests-collage {
    --u: 1px;
  }

  .rq-phone {
    width: 72%;
  }

  .rq-request {
    width: min(280px, 78%);
    padding: 10px 12px;
  }

  .rq-survey {
    top: auto;
    right: 12px;
    bottom: 16px;
    left: auto;
    width: min(220px, 68%);
    padding: 12px;
  }

  .rq-emojis span {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

/* Depth reveal: background, phone, then the two cards. One pass, then still. */

.requests-collage::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(168deg, #f7f6f4 8%, #efece7 92%);
  animation: rq-depth-bg 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-play-state: paused;
  pointer-events: none;
}

.rq-phone {
  animation: rq-phone-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-play-state: paused;
}

.rq-request {
  animation: rq-request-in 820ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
  animation-play-state: paused;
}

.rq-survey {
  animation: rq-survey-in 840ms cubic-bezier(0.16, 1, 0.3, 1) 3.5s both;
  animation-play-state: paused;
}

/* Conversation: typing dots, then the message lands and the avatar stays. */

.rq-bubble {
  position: relative;
}

.rq-bubble .rq-rail {
  transform-origin: top center;
  animation: rq-avatar-in 360ms cubic-bezier(0.16, 1, 0.3, 1) var(--rq-type) both;
  animation-play-state: paused;
}

.rq-bubble .rq-thread {
  transform-origin: bottom left;
  animation: rq-message-in 460ms cubic-bezier(0.16, 1, 0.3, 1) var(--rq-show) both;
  animation-play-state: paused;
}

.rq-bubble-out .rq-thread {
  transform-origin: bottom right;
}

.rq-typing {
  position: absolute;
  top: 0;
  left: calc(40 * var(--u));
  z-index: 1;
  display: flex;
  gap: calc(4 * var(--u));
  align-items: center;
  height: calc(30 * var(--u));
  padding: 0 calc(11 * var(--u));
  border: 1px solid #e7e5e4;
  border-radius: calc(6 * var(--u));
  background: #fff;
  opacity: 0;
  animation: rq-typing-life calc(var(--rq-show) - var(--rq-type)) linear var(--rq-type) both;
  animation-play-state: paused;
}

.rq-bubble-out .rq-typing {
  right: calc(40 * var(--u));
  left: auto;
  border-color: #d2dad6;
  background: #ecf4f1;
}

.rq-typing i {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: calc(999 * var(--u));
  background: #a8a29e;
  animation: rq-typing-dot 900ms cubic-bezier(0.45, 0, 0.55, 1) var(--rq-type) 2 both;
  animation-play-state: paused;
}

.rq-typing i:nth-child(2) {
  animation-delay: calc(var(--rq-type) + 150ms);
}

.rq-typing i:nth-child(3) {
  animation-delay: calc(var(--rq-type) + 300ms);
}

.rq-log {
  animation: rq-log-in 520ms cubic-bezier(0.16, 1, 0.3, 1) 2.8s both;
  animation-play-state: paused;
}

.requests-collage.is-revealed::before,
.requests-collage.is-revealed .rq-phone,
.requests-collage.is-revealed .rq-request,
.requests-collage.is-revealed .rq-survey,
.requests-collage.is-revealed .rq-rail,
.requests-collage.is-revealed .rq-thread,
.requests-collage.is-revealed .rq-typing,
.requests-collage.is-revealed .rq-typing i,
.requests-collage.is-revealed .rq-log {
  animation-play-state: running;
}

@keyframes rq-avatar-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rq-message-in {
  from {
    opacity: 0;
    transform: translateY(calc(8 * var(--u))) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rq-typing-life {
  0% {
    opacity: 0;
    transform: translateY(calc(4 * var(--u))) scale(0.92);
  }

  18%,
  86% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(0) scale(0.96);
  }
}

@keyframes rq-typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.45;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes rq-log-in {
  from {
    opacity: 0;
    transform: translateY(calc(6 * var(--u)));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rq-depth-bg {
  from {
    transform: translateY(calc(5 * var(--u)));
  }

  to {
    transform: translateY(0);
  }
}

@keyframes rq-phone-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(24 * var(--u)));
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes rq-request-in {
  from {
    opacity: 0;
    transform: translate(-18px, -12px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes rq-survey-in {
  from {
    opacity: 0;
    transform: translate(calc(20 * var(--u)), calc(14 * var(--u)));
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .requests-collage::before,
  .requests-collage .rq-phone,
  .requests-collage .rq-request,
  .requests-collage .rq-survey,
  .requests-collage .rq-rail,
  .requests-collage .rq-thread,
  .requests-collage .rq-log {
    animation: none;
    opacity: 1;
  }

  .requests-collage .rq-typing {
    display: none;
  }

  .requests-collage .rq-phone {
    transform: translateX(-50%);
  }
}

/* Amenity booking: the book screen, with the date and time sheet over it. */

.amenity-collage {
  --ink: #44403c;
  --muted: #737373;
  --primary: #117654;
  position: relative;
  aspect-ratio: 680 / 531;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 28%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(168deg, #f7f6f4 8%, #efece7 92%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.amenity-collage svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.am-phone {
  position: absolute;
  top: 28px;
  right: auto;
  left: 24px;
  z-index: 1;
  box-sizing: border-box;
  width: 54%;
  height: 118%;
  padding: 12px;
  overflow: hidden;
  background: #f7f6f4;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 40px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 36px -22px rgba(18, 37, 35, 0.22);
}

.am-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 30px;
}

.am-status {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 6px 16px 0 18px;
  font-size: 11px;
  font-weight: 600;
}

.am-glyphs {
  display: flex;
  gap: 5px;
  align-items: center;
}

.am-signal {
  width: 13px;
  height: 8px;
  background:
    linear-gradient(#1c1917, #1c1917) left bottom / 2px 4px no-repeat,
    linear-gradient(#1c1917, #1c1917) 4px bottom / 2px 6px no-repeat,
    linear-gradient(#1c1917, #1c1917) 8px bottom / 2px 8px no-repeat;
}

.am-battery {
  box-sizing: border-box;
  width: 16px;
  height: 8px;
  padding: 1px;
  border: 1px solid rgba(28, 25, 23, 0.4);
  border-radius: 2px;
}

.am-battery > span {
  display: block;
  width: 70%;
  height: 100%;
  background: #1c1917;
  border-radius: 1px;
}

.am-topbar {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  height: 40px;
  padding: 0 8px;
}

.am-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.04);
}

.am-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.am-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 4px 12px 16px;
}

.am-cover {
  aspect-ratio: 16 / 9;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  background:
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=800&h=450&q=70")
      center 30% / cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.am-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.am-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.am-facts > span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.am-field-label {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.am-field {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.am-field span {
  min-width: 0;
}

.am-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 64px;
  background: linear-gradient(to bottom, rgba(239, 236, 231, 0), rgba(239, 236, 231, 0.85) 58%, #efece7);
  pointer-events: none;
}

.am-sheet {
  position: absolute;
  right: 20px;
  bottom: 24px;
  left: auto;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(268px, 48%);
  padding: 14px;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 36px -18px rgba(18, 37, 35, 0.28);
}

.am-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}

.am-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f5f5f4;
}

.am-week,
.am-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.am-week {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.am-days span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  font-size: 12px;
  font-weight: 500;
}

.am-days .is-selected {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}

.am-slots-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
}

.am-slots-head span:last-child {
  color: var(--primary);
  font-size: 12px;
}

.am-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.am-slots span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
}

.am-slots .is-selected {
  border-color: var(--primary);
  background: #e7f3ee;
}

.am-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.am-actions span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.am-actions .is-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* Booking beat: sheet rises, date and slot are picked, Select is pressed, then the sheet confirms the booking. One pass. */

.amenity-collage .am-sheet {
  animation: am-sheet-in 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.amenity-collage .am-days .is-selected {
  animation: am-pick-day 560ms cubic-bezier(0.16, 1, 0.3, 1) 1200ms both;
}

.amenity-collage .am-slots .is-selected {
  animation: am-pick-slot 520ms cubic-bezier(0.16, 1, 0.3, 1) 2100ms both;
}

.amenity-collage .am-actions .is-primary {
  animation: am-press 420ms cubic-bezier(0.16, 1, 0.3, 1) 3000ms both;
}

.amenity-collage .am-field {
  animation: am-field-flash 1100ms cubic-bezier(0.16, 1, 0.3, 1) 3400ms both;
}

.amenity-collage .am-field span {
  animation: am-field-fill 520ms cubic-bezier(0.16, 1, 0.3, 1) 3400ms both;
}

.am-done {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  animation: am-done-in 640ms cubic-bezier(0.16, 1, 0.3, 1) 3800ms both;
}

.am-done b {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.am-done > span:last-child {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.am-done-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e7f3ee;
  color: var(--primary);
}

.amenity-collage .am-done-mark svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.amenity-collage .am-sheet,
.amenity-collage .am-days .is-selected,
.amenity-collage .am-slots .is-selected,
.amenity-collage .am-actions .is-primary,
.amenity-collage .am-field,
.amenity-collage .am-field span,
.amenity-collage .am-done {
  animation-play-state: paused;
}

.amenity-collage.is-revealed .am-sheet,
.amenity-collage.is-revealed .am-days .is-selected,
.amenity-collage.is-revealed .am-slots .is-selected,
.amenity-collage.is-revealed .am-actions .is-primary,
.amenity-collage.is-revealed .am-field,
.amenity-collage.is-revealed .am-field span,
.amenity-collage.is-revealed .am-done {
  animation-play-state: running;
}

.amenity-collage.is-leaving .am-sheet {
  animation: am-sheet-out 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.amenity-collage.is-restarting .am-sheet,
.amenity-collage.is-restarting .am-days .is-selected,
.amenity-collage.is-restarting .am-slots .is-selected,
.amenity-collage.is-restarting .am-actions .is-primary,
.amenity-collage.is-restarting .am-field,
.amenity-collage.is-restarting .am-field span,
.amenity-collage.is-restarting .am-done {
  animation: none;
}

@keyframes am-sheet-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes am-sheet-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes am-pick-day {
  from {
    background: transparent;
    color: var(--ink);
  }

  to {
    background: var(--primary);
    color: #fff;
  }
}

@keyframes am-pick-slot {
  from {
    border-color: #d6d3d1;
    background: #fff;
  }

  to {
    border-color: var(--primary);
    background: #e7f3ee;
  }
}

@keyframes am-press {
  0%,
  100% {
    transform: none;
  }

  45% {
    transform: scale(0.96);
  }
}

@keyframes am-field-flash {
  0% {
    border-color: #e7e5e4;
  }

  30% {
    border-color: var(--primary);
  }

  100% {
    border-color: #e7e5e4;
  }
}

@keyframes am-field-fill {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes am-done-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amenity-collage .am-sheet,
  .amenity-collage .am-days .is-selected,
  .amenity-collage .am-slots .is-selected,
  .amenity-collage .am-actions .is-primary,
  .amenity-collage .am-field,
  .amenity-collage .am-field span,
  .amenity-collage .am-done {
    animation: none;
  }

  .amenity-collage .am-done {
    display: none;
  }
}

@media (max-width: 767px) {
  .am-phone {
    top: 16px;
    left: 12px;
    width: 62%;
  }

  .am-sheet {
    right: 12px;
    bottom: 16px;
    left: auto;
    width: min(210px, 58%);
    padding: 10px;
  }

  .am-slots span {
    font-size: 10px;
  }
}

/* Visitor shot on the 616 x 481 Figma frame: visitor details with the QR, and the possible match alert. */

.visitor-collage {
  --ink: #44403c;
  --muted: #737373;
  --line: #e7e5e4;
  --primary: #117654;
  position: relative;
  aspect-ratio: 616 / 481;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(170.6deg, #f7f6f4 13.8%, #efece7 86.2%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.visitor-collage svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vs-phone {
  position: absolute;
  top: 5.82%;
  left: 33.77%;
  z-index: 1;
  box-sizing: border-box;
  width: 51.95%;
  height: 118.1%;
  padding: 12px;
  overflow: hidden;
  background: #f7f6f4;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 40px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 36px -22px rgba(18, 37, 35, 0.22);
}

.vs-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 30px;
}

.vs-status {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 8px 16px 0 18px;
  font-size: 11px;
  font-weight: 600;
}

.vs-glyphs {
  display: flex;
  gap: 4px;
  align-items: center;
}

.vs-signal {
  width: 9.5px;
  height: 7px;
  background:
    linear-gradient(#44403c, #44403c) left bottom / 2px 3px no-repeat,
    linear-gradient(#44403c, #44403c) 2.5px bottom / 2px 4px no-repeat,
    linear-gradient(#44403c, #44403c) 5px bottom / 2px 5.5px no-repeat,
    linear-gradient(rgba(68, 64, 60, 0.28), rgba(68, 64, 60, 0.28)) right bottom / 2px 7px no-repeat;
}

.vs-battery {
  position: relative;
  box-sizing: border-box;
  width: 15px;
  height: 7.5px;
  margin-right: 1.5px;
  padding: 1.5px;
  border: 1px solid rgba(68, 64, 60, 0.35);
  border-radius: 2px;
}

.vs-battery::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2.5px;
  width: 1px;
  height: 3px;
  border-radius: 0 0.5px 0.5px 0;
  background: rgba(68, 64, 60, 0.4);
  transform: translateY(-50%);
}

.vs-battery > span {
  display: block;
  width: 8.5px;
  height: 100%;
  background: #44403c;
  border-radius: 1px;
}

.vs-head {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}

.vs-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.04);
}

.vs-head > span:nth-child(2) {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.vs-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 4px 14px 20px;
}

.vs-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vs-section.is-divided {
  padding-top: 12px;
  border-top: 1px solid rgba(231, 229, 228, 0.9);
}

.vs-section-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.vs-state {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 14.1px;
  font-weight: 500;
  line-height: 18.8px;
}

.vs-state i {
  width: 9.4px;
  height: 9.4px;
  border-radius: 999px;
  background: #d97706;
}

.vs-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
}

.vs-rows span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.vs-rows b {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vs-qr {
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
}

.visitor-collage .vs-qr svg {
  width: 112px;
  height: 112px;
  fill: #1c1917;
  stroke: none;
  transition: filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vs-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 64px;
  background: linear-gradient(to bottom, rgba(239, 236, 231, 0), rgba(239, 236, 231, 0.85) 58%, #efece7);
  pointer-events: none;
}

.visitor-collage .vs-alert {
  position: absolute;
  bottom: 8%;
  left: 6%;
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: center;
  width: min(280px, 52%);
  padding: 12px 14px;
  border-radius: 16px;
  background: #117654;
  color: #fff;
  box-shadow: 0 16px 28px rgba(18, 37, 35, 0.18);
}

.vs-granted-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.vs-granted-mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vs-granted-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vs-granted-copy b {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.vs-granted-copy span {
  font-size: 12px;
  line-height: 16px;
  opacity: 0.9;
}

.visitor-collage .vs-phone {
  top: 2.5%;
}

.visitor-collage .vs-body {
  gap: 10px;
}

.visitor-collage .vs-section.is-divided {
  padding-top: 10px;
}

.vs-state-label {
  white-space: nowrap;
  transition: color 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visitor-collage.is-granted .vs-state-label {
  color: #117654;
}

.visitor-collage.is-granted .vs-state i {
  background: #117654;
  animation: none;
}

.visitor-collage.is-screening .vs-state i {
  animation: vs-status-pulse 900ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.vs-scan {
  position: relative;
  display: block;
  width: 112px;
  height: 112px;
}

.visitor-collage .vs-scan > svg {
  display: block;
}

.vs-scan-line {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--primary) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

.visitor-collage.is-scanning .vs-scan-line {
  animation: vs-scan-sweep 1000ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

.visitor-collage.is-screening .vs-scan > svg {
  filter: grayscale(0.45);
}

.visitor-collage.is-story .vs-alert {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.visitor-collage.is-story.is-alert .vs-alert {
  opacity: 1;
  transform: none;
}

.visitor-collage.is-resetting .vs-body {
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vs-scan-sweep {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(112px); }
}

@keyframes vs-status-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.45; }
}

@media (max-width: 767px) {
  .visitor-collage .vs-alert {
    width: 46%;
  }
}

/* Package shot: shares the visitor phone, with package details and a push notification. */

.package-collage {
  --ink: #44403c;
  --muted: #737373;
  --primary: #117654;
  position: relative;
  aspect-ratio: 616 / 481;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(170.6deg, #f7f6f4 13.8%, #efece7 86.2%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.package-collage svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.package-collage .vs-phone {
  top: 4%;
  left: 38%;
}

.package-collage .vs-section {
  gap: 6px;
}

.package-collage .vs-section-title {
  font-size: 13px;
}

.pk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 7px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 500;
}

.package-collage .pk-badge svg {
  width: 12px;
  height: 12px;
}

.pk-barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #1c1917;
  font-size: 11px;
}

.package-collage .pk-scan > svg {
  width: 150px;
  height: 40px;
  fill: #000;
  stroke: none;
}

.pk-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 2px;
  padding-left: 60px;
  border-radius: 999px;
  background: #f5f5f4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.pk-slide-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 60px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}

.package-collage .pk-slide-thumb svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.pk-push {
  position: absolute;
  top: 36%;
  left: 4%;
  z-index: 4;
  display: flex;
  gap: 10px;
  box-sizing: border-box;
  width: 46%;
  padding: 12px 14px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 14px rgba(18, 37, 35, 0.12);
  backdrop-filter: blur(12px);
}

.pk-push-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 9px;
  background: #fff;
}

.package-collage .pk-push-icon svg {
  width: 20px;
  height: 20px;
  stroke: none;
}

.pk-push-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  color: #1c1917;
  font-size: 12px;
  line-height: 16px;
}

.pk-push-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pk-push-head b {
  font-weight: 600;
}

.pk-push-body > b {
  font-weight: 600;
}

.pk-badge {
  transition:
    background-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
    color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.package-collage .pk-badge-done {
  display: none;
}

.package-collage.is-confirmed .pk-badge {
  border-color: rgba(17, 118, 84, 0.22);
  background: #ecfdf5;
  color: var(--primary);
}

.package-collage.is-confirmed .pk-badge-open {
  display: none;
}

.package-collage.is-confirmed .pk-badge-done {
  display: block;
}

.pk-scan {
  position: relative;
  display: block;
  padding: 6px 8px;
}

.package-collage .pk-scan > svg {
  display: block;
}

.pk-scan-frame {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background:
    linear-gradient(var(--primary), var(--primary)) top left / 12px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) top left / 2px 12px no-repeat,
    linear-gradient(var(--primary), var(--primary)) top right / 12px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) top right / 2px 12px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom right / 2px 12px no-repeat;
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pk-scan-line {
  position: absolute;
  top: 6px;
  right: 2px;
  left: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow:
    0 0 6px 1px color-mix(in srgb, var(--primary) 70%, transparent),
    0 0 18px 4px color-mix(in srgb, var(--primary) 28%, transparent);
  opacity: 0;
}

.package-collage.is-scanning .pk-scan-frame,
.package-collage.is-scanned .pk-scan-frame {
  opacity: 1;
  transform: scale(1);
}

.package-collage.is-scanning .pk-scan-line {
  animation: pk-scan-sweep 1100ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

.package-collage.is-scanned .pk-scan {
  animation: pk-scan-success 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.package-collage.is-scanned .pk-scan-frame {
  opacity: 0;
  transition-delay: 700ms;
}

@keyframes pk-scan-sweep {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  50% { transform: translateY(40px); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes pk-scan-success {
  0% { background: transparent; }
  30% { background: color-mix(in srgb, var(--primary) 14%, transparent); }
  100% { background: transparent; }
}

.pk-barcode-caption {
  display: grid;
}

.pk-barcode-caption > span {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition:
    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pk-caption-done {
  color: var(--primary);
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px);
}

.package-collage .pk-caption-done svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.package-collage.is-scanned .pk-caption-idle {
  opacity: 0;
  transform: translateY(-4px);
}

.package-collage.is-scanned .pk-caption-done {
  opacity: 1;
  transform: none;
}

.pk-slide {
  overflow: hidden;
}

.pk-slide-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 68px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, #f5f5f4);
  transition: width 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}

.pk-slide-label {
  position: relative;
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pk-slide-thumb {
  z-index: 1;
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}

.package-collage .pk-slide-thumb svg {
  grid-area: 1 / 1;
}

.package-collage .pk-thumb-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.pk-thumb-arrow {
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.package-collage.is-sliding .pk-slide-fill {
  width: 100%;
}

.package-collage.is-sliding .pk-slide-thumb {
  transform: translateX(var(--slide-distance, 0px));
}

.package-collage.is-sliding .pk-slide-label {
  opacity: 0;
}

.package-collage.is-confirmed .pk-thumb-arrow {
  opacity: 0;
}

.package-collage.is-confirmed .pk-thumb-check {
  stroke-dashoffset: 0;
}

.package-collage.is-animated .pk-push {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.package-collage.is-animated.is-pushed .pk-push {
  opacity: 1;
  transform: none;
}

.package-collage.is-animated.is-push-away .pk-push {
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
}

.package-collage .vs-body {
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.package-collage.is-resetting .vs-body {
  opacity: 0;
}

.package-collage.is-resetting .pk-slide-fill,
.package-collage.is-resetting .pk-slide-thumb,
.package-collage.is-resetting .pk-thumb-check,
.package-collage.is-resetting .pk-badge,
.package-collage.is-resetting .pk-barcode-caption > span {
  transition: none;
}

.pk-cursor {
  --cursor-size: 52px;
  --cursor-x: 0px;
  --cursor-y: 0px;
  --press: 1;
  --tip-x: calc(var(--cursor-size) * 11.1102 / 31.4644);
  --tip-y: calc(var(--cursor-size) * 9.44707 / 31.4644);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--cursor-x) - var(--tip-x)), calc(var(--cursor-y) - var(--tip-y))) scale(var(--press));
  transform-origin: 35.31% 27.6%;
  transition:
    transform 720ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.package-collage.is-cursor-on .pk-cursor {
  opacity: 1;
}

.pk-cursor.is-pressing {
  --press: 0.86;
  transition:
    transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pk-cursor.is-dragging {
  transition:
    transform 1100ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.package-collage .pk-cursor svg {
  display: block;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  overflow: visible;
  fill: none;
  stroke: none;
}

@media (max-width: 767px) {
  .pk-push {
    width: 52%;
    padding: 9px;
  }

  .pk-push-body {
    font-size: 10.5px;
    line-height: 14px;
  }
}

/* Broadcast shot on a 680 x 531 frame; --u is one frame unit. */

.broadcast-shot {
  --frame-u: calc(100cqw / 680);
  --u: var(--frame-u);
  --foreground: #1c1917;
  --ink: #44403c;
  --muted: #78716c;
  --border: #ece9e5;
  --primary: #117654;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 680 / 531;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(168deg, #f7f6f4 8%, #efece7 92%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.bc-stage {
  position: absolute;
  inset: 0;
}

.broadcast-shot svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bc-window {
  --u: calc(var(--frame-u) * 1.25);
  position: absolute;
  top: calc(24 * var(--frame-u));
  left: calc(24 * var(--frame-u));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: calc(632 * var(--frame-u));
  height: calc(560 * var(--frame-u));
  padding: calc(8 * var(--u));
  border: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: calc(18 * var(--u));
  background: #f3f1ed;
  box-shadow: 0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-22 * var(--u)) rgba(18, 37, 35, 0.25);
}

.bc-side {
  display: none;
  flex-direction: column;
  gap: calc(1 * var(--u));
  padding: calc(4 * var(--u)) calc(6 * var(--u)) 0 0;
}

.bc-property {
  display: flex;
  align-items: center;
  height: calc(30 * var(--u));
  margin-bottom: calc(6 * var(--u));
  padding: 0 calc(8 * var(--u));
  color: var(--foreground);
  font-size: calc(11 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}

.bc-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(26 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}

.bc-item svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.bc-item.is-active {
  background: rgba(17, 118, 84, 0.1);
  color: #0d5a41;
}

.bc-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(3 * var(--u));
  border-radius: calc(6 * var(--u)) 0 0 calc(6 * var(--u));
  background: var(--primary);
}

.bc-group {
  margin: calc(12 * var(--u)) 0 calc(4 * var(--u));
  padding: 0 calc(8 * var(--u));
  color: var(--muted);
  font-size: calc(9 * var(--u));
  font-weight: 500;
}

.bc-main {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, #fff, #fbfaf9);
}

.bc-list {
  display: flex;
  flex: 0 0 calc(212 * var(--u));
  flex-direction: column;
  min-width: 0;
}

.bc-crumbs {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(34 * var(--u));
  padding: 0 calc(14 * var(--u));
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: calc(9 * var(--u));
  white-space: nowrap;
}

.bc-crumbs svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.bc-crumbs b {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-weight: 500;
  text-overflow: ellipsis;
}

.bc-list-body {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  padding: calc(14 * var(--u)) calc(10 * var(--u));
}

.bc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 calc(2 * var(--u)) calc(10 * var(--u));
}

.bc-list-head > span:first-child {
  color: var(--foreground);
  font-size: calc(15 * var(--u));
  font-weight: 600;
}

.bc-search {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  width: calc(86 * var(--u));
  height: calc(24 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 1px solid var(--border);
  border-radius: calc(7 * var(--u));
  background: #fff;
  color: #a8a29e;
  font-size: calc(9 * var(--u));
}

.bc-search svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.bc-row {
  display: flex;
  gap: calc(9 * var(--u));
  padding: calc(9 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
}

.bc-row.is-selected {
  background: rgba(17, 118, 84, 0.07);
}

.bc-row-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #f3f1ed;
  color: var(--ink);
}

.bc-row-icon svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.bc-row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.bc-row-title {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}

.bc-row-title b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: calc(10 * var(--u));
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-row-title i {
  flex: none;
  padding: 0 calc(5 * var(--u));
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: calc(4 * var(--u));
  color: #2563eb;
  font-size: calc(8 * var(--u));
  font-style: normal;
  font-weight: 500;
  line-height: calc(13 * var(--u));
}

.bc-row-preview {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(9 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-row-meta {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  color: var(--muted);
  font-size: calc(8 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}

.bc-row-meta em {
  width: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 50%;
  background: currentColor;
}

.bc-aside {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: calc(12 * var(--u));
  border-left: 1px solid var(--border);
  background: #f7f6f4;
}

.bc-aside-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(26 * var(--u));
  margin-bottom: calc(12 * var(--u));
}

.bc-close {
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}

.bc-close svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.bc-open {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(8 * var(--u));
  color: var(--foreground);
  font-size: calc(9.5 * var(--u));
  font-weight: 500;
}

.bc-open svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}

.bc-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(12 * var(--u));
  background: #fff;
}

.bc-sender {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid var(--border);
}

.bc-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--primary);
  color: #fff;
  font-size: calc(9 * var(--u));
  font-weight: 600;
}

.bc-from {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
}

.bc-from b {
  color: var(--foreground);
  font-size: calc(10 * var(--u));
  font-weight: 600;
}

.bc-from small {
  color: var(--muted);
  font-size: calc(8.5 * var(--u));
}

.bc-cover-brand,
.bc-footer-brand {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  color: #fff;
  font-size: calc(7.5 * var(--u));
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.bc-cover-brand i,
.bc-footer-brand i {
  width: calc(8 * var(--u));
  height: calc(11 * var(--u));
  border: calc(1.6 * var(--u)) solid currentColor;
  border-bottom-width: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0 0;
  background: linear-gradient(currentColor, currentColor) center calc(2 * var(--u)) / calc(1.4 * var(--u)) calc(4 * var(--u)) no-repeat;
}

.bc-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(15 * var(--u));
  background:
    linear-gradient(90deg, rgba(7, 40, 29, 0.92) 0%, rgba(7, 40, 29, 0.55) 46%, rgba(7, 40, 29, 0) 80%),
    url("https://images.unsplash.com/photo-1493852303730-955ff798ba12?auto=format&fit=crop&w=800&q=70") 75% center / cover;
  color: #fff;
}

.bc-cover.is-freight {
  background:
    linear-gradient(90deg, rgba(18, 28, 38, 0.9) 0%, rgba(18, 28, 38, 0.45) 46%, rgba(18, 28, 38, 0) 78%),
    url("https://images.unsplash.com/photo-1719463814218-52e17f720e8a?auto=format&fit=crop&w=800&q=70") 30% center / cover;
}

.bc-cover.is-freight .bc-cover-copy em {
  color: #c5d4e8;
}

.bc-cover.is-freight::after {
  background: linear-gradient(90deg, #8aa4c2, #4d6d8c);
}

.bc-cover.is-social {
  background:
    linear-gradient(90deg, rgba(48, 28, 12, 0.88) 0%, rgba(48, 28, 12, 0.45) 50%, rgba(48, 28, 12, 0) 84%),
    url("https://images.unsplash.com/photo-1760783319266-a2b1f394eb13?auto=format&fit=crop&w=800&q=70") center 42% / cover;
}

.bc-cover.is-social .bc-cover-copy em {
  color: #f3d2a4;
}

.bc-cover.is-social::after {
  background: linear-gradient(90deg, #e0a15a, #c47b32);
}

.bc-cover.is-swapping,
.bc-content.is-swapping,
.bc-crumbs b.is-swapping,
.bc-from small.is-swapping {
  opacity: 0;
}

.bc-cursor {
  --cursor-size: calc(60 * var(--u));
  --cursor-x: 0px;
  --cursor-y: 0px;
  --press: 1;
  --tip-x: calc(var(--cursor-size) * 11.1102 / 31.4644);
  --tip-y: calc(var(--cursor-size) * 9.44707 / 31.4644);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--cursor-x) - var(--tip-x)), calc(var(--cursor-y) - var(--tip-y))) scale(var(--press));
  transform-origin: 35.31% 27.6%;
  transition:
    transform 720ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.broadcast-shot.is-playing .bc-cursor {
  opacity: 1;
}

.bc-cursor.is-pressing {
  --press: 0.86;
  transition:
    transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.broadcast-shot .bc-cursor svg {
  display: block;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  overflow: visible;
  fill: none;
  stroke: none;
}

.bc-cover,
.bc-content,
.bc-crumbs b,
.bc-from small {
  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bc-cover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(3 * var(--u));
  background: linear-gradient(90deg, #34c38f, var(--primary));
}

.bc-cover-copy {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}

.bc-cover-copy em {
  color: #9ee6c4;
  font-size: calc(7 * var(--u));
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bc-cover-copy b {
  max-width: calc(120 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.15;
}

.bc-content {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(14 * var(--u));
}

.bc-subject {
  color: var(--foreground);
  font-size: calc(13 * var(--u));
  font-weight: 600;
}

.bc-content p {
  margin: 0;
  color: var(--ink);
  font-size: calc(9 * var(--u));
  line-height: 1.55;
}

.bc-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2.5 * var(--u));
  aspect-ratio: 4 / 1;
  border-top: calc(3 * var(--u)) solid var(--primary);
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(52, 195, 143, 0.18), transparent 70%),
    #0b3326;
  color: rgba(255, 255, 255, 0.7);
}

.bc-footer-brand {
  margin-bottom: calc(3 * var(--u));
}

.bc-footer-line {
  font-size: calc(7 * var(--u));
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bc-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: calc(72 * var(--u));
  background: linear-gradient(to bottom, rgba(239, 236, 231, 0), rgba(239, 236, 231, 0.85) 58%, #efece7);
  pointer-events: none;
}

/* Branding shot, laid out on the 642 x 458 Figma frame; 1em equals one frame unit. */

@property --bs-brand {
  syntax: "<color>";
  inherits: true;
  initial-value: #117654;
}

@property --bs-art-hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.brand-shot {
  --bs-brand: #117654;
  --bs-art-hue: 0deg;
  --ink: #44403c;
  --muted: #737373;
  --primary: var(--bs-brand);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 642 / 458;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

.bs-stage {
  position: absolute;
  inset: 0;
  font-size: calc(100cqw / 642);
}

.brand-shot svg {
  width: 13em;
  height: 13em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bs-shell {
  position: absolute;
  top: 0;
  left: 57em;
  width: 540em;
  height: 458em;
  overflow: hidden;
  border-radius: 32em 32em 0 0;
  background:
    radial-gradient(ellipse 42% 22% at 72% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 100%),
    radial-gradient(ellipse 34% 16% at 40% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 100%),
    #f8f6f4;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
}

.bs-frame {
  position: absolute;
  top: 28em;
  left: 30em;
  width: 560em;
  height: 440em;
  padding: 14em;
  border: 1em solid rgba(28, 25, 23, 0.05);
  border-radius: 28em;
  background: #f1efeb;
}

.bs-app {
  display: grid;
  grid-template-columns: 200em minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  border-radius: 12em;
  background: color-mix(in srgb, var(--primary) 3%, #fff);
}

.bs-side {
  display: flex;
  flex-direction: column;
  padding: 12em 6em;
}

.bs-property {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.2em;
  margin-bottom: 1.6em;
  padding: 0 0.75em 0 1.3em;
  font-size: 11em;
  font-weight: 600;
  color: #1c1917;
}

.bs-property svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--muted);
}

.bs-group {
  margin-top: 0.65em;
  padding: 0 1.55em;
  color: rgba(68, 64, 60, 0.6);
  font-size: 9em;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 2.4;
  text-transform: uppercase;
}

.bs-item {
  position: relative;
  display: flex;
  gap: 0.55em;
  align-items: center;
  height: 2.5em;
  padding: 0 0.85em;
  border-radius: 0.6em;
  font-size: 11em;
  font-weight: 400;
}

.bs-item svg {
  width: 1.15em;
  height: 1.15em;
}

.bs-item.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-weight: 500;
}

.bs-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.28em;
  border-radius: 0.6em 0 0 0.6em;
  background: var(--primary);
}

.bs-main {
  display: flex;
  flex-direction: column;
  gap: 7em;
  min-width: 0;
  padding-top: 6em;
}

.bs-cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-shrink: 0;
  height: 145em;
  padding: 0 16em 14em;
  border-bottom: 3em solid var(--primary);
  border-radius: 8em 0 0 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.1) 55%, transparent),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80")
      center 40% / cover;
  color: #fff;
}

.bs-date {
  font-size: 11em;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.bs-hello {
  font-size: 17em;
  font-weight: 600;
  line-height: 1.4;
}

.bs-actions {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: 179em 179em;
  gap: 6em;
}

.bs-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 53em;
  padding: 0 10em 0 12em;
  overflow: hidden;
  border: 1em solid #e7e5e4;
  border-radius: 8em;
  background: #fff;
}

.bs-wedge {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 150%;
  aspect-ratio: 1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--primary) 16%, transparent) 0%,
    transparent 90%
  );
  transform: rotate(45deg) translateY(15%) translateX(55%);
  pointer-events: none;
}

.bs-action > span:not(.bs-wedge) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bs-action b {
  font-size: 11em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.bs-action small {
  color: var(--muted);
  font-size: 9em;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
}

.bs-action img {
  position: relative;
  width: 44em;
  height: 38em;
  object-fit: contain;
  filter: hue-rotate(var(--bs-art-hue));
}

.bs-updates {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1em solid #e7e5e4;
  border-radius: 8em 0 0 0;
  background: #fff;
}

.bs-updates-head {
  display: flex;
  gap: 0.65em;
  align-items: center;
  height: 3.8em;
  padding: 0 1.35em;
  border-bottom: 1px solid #f0eeec;
  font-size: 12em;
  font-weight: 500;
}

.bs-updates-head svg {
  width: 1.2em;
  height: 1.2em;
}

.bs-updates-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  font-size: 0.75em;
  font-weight: 600;
}

.bs-tiles {
  display: grid;
  grid-template-columns: 170em 170em;
  gap: 8em;
  padding: 12em 0 0 4em;
}

.bs-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 10em;
  border-left: 3em solid var(--primary);
}

.bs-tile em {
  color: var(--primary);
  font-size: 9em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-transform: uppercase;
}

.bs-tile b,
.bs-tile small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-tile b {
  font-size: 11em;
  font-weight: 600;
  line-height: 1.7;
}

.bs-tile small {
  color: var(--muted);
  font-size: 9em;
  line-height: 1.9;
}

.bs-logo {
  position: absolute;
  top: 17em;
  right: 8em;
  z-index: 3;
  display: flex;
  height: 72em;
  padding: 8em;
  border: 1em solid #ede9e4;
  border-radius: 16em;
  background: #f8f6f4;
  box-shadow: 0 10em 24em -10em rgba(28, 25, 23, 0.22);
}

.bs-logo > span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0 1.1em;
  border: 1px dashed #e0d6cc;
  border-radius: 0.65em;
  background: #fff;
  color: #1c1917;
  font-size: 15em;
  font-weight: 600;
  white-space: nowrap;
}

.bs-picker {
  position: absolute;
  top: 302em;
  left: 14em;
  z-index: 3;
  width: 246em;
  height: 125em;
  padding: 12em;
  border: 1em solid #ede9e4;
  border-radius: 22em;
  background: #f8f6f4;
  box-shadow: 0 14em 30em -14em rgba(28, 25, 23, 0.28);
}

.bs-picker-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14em;
  height: 100%;
  padding: 0 16em;
  border: 1em solid #e7e5e4;
  border-radius: 16em;
  background: #fff;
}

.bs-picker-title {
  font-size: 15em;
  font-weight: 500;
  line-height: 1.3;
}

.bs-colors {
  display: flex;
  gap: 6em;
  align-items: center;
}

.bs-colors > span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26em;
  height: 26em;
  border-radius: 999px;
}

.bs-colors .is-selected svg {
  width: 13em;
  height: 13em;
  stroke: #fff;
  stroke-width: 2;
}


/* Brand recolor: the cursor picks a new swatch and the app behind it follows. */

.brand-shot.is-playing {
  transition:
    --bs-brand 900ms cubic-bezier(0.16, 1, 0.3, 1),
    --bs-art-hue 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bs-cursor {
  --cursor-size: 56em;
  --cursor-x: 57em;
  --cursor-y: 381em;
  --press: 1;
  --tip-x: calc(var(--cursor-size) * 11.1102 / 31.4644);
  --tip-y: calc(var(--cursor-size) * 9.44707 / 31.4644);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--cursor-x) - var(--tip-x)), calc(var(--cursor-y) - var(--tip-y))) scale(var(--press));
  transform-origin: 35.31% 27.6%;
  transition:
    transform 720ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-shot.is-playing .bs-cursor {
  opacity: 1;
}

.bs-cursor.is-pressing {
  --press: 0.86;
  transition:
    transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-shot .bs-cursor svg {
  display: block;
  width: var(--cursor-size);
  height: calc(var(--cursor-size) * 34.2343 / 31.4644);
  overflow: visible;
  fill: none;
  stroke: none;
}

.bs-ripple {
  --ripple-x: 153em;
  position: absolute;
  top: calc(381em - 13em);
  left: calc(var(--ripple-x) - 13em);
  z-index: 4;
  width: 26em;
  height: 26em;
  border: 2em solid var(--primary);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.bs-ripple.is-on {
  animation: bs-ripple 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bs-colors .is-picked svg {
  animation: bs-check-in 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bs-ripple {
  from {
    opacity: 0.55;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes bs-check-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs-cursor,
  .bs-ripple {
    display: none;
  }
}