/* JAIPUR EDIT experience system · 2026-08-30
   A unified hospitality-first layer for the public site, guest account,
   stay portal and property operations workspace. */

:root {
  --je-wine: #631126;
  --je-wine-deep: #321018;
  --je-wine-soft: #8a2840;
  --je-gold: #c89b52;
  --je-gold-light: #ead3a8;
  --je-ink: #2f2224;
  --je-muted: #74696a;
  --je-cream: #f7f1e8;
  --je-paper: #fffdf9;
  --je-sand: #e9ddcc;
  --je-line: rgba(77, 43, 46, .13);
  --je-green: #226d57;
  --je-red: #a83c43;
  --je-blue: #416d8f;
  --je-shadow-sm: 0 8px 28px rgba(55, 31, 30, .07);
  --je-shadow-md: 0 20px 58px rgba(55, 31, 30, .11);
  --je-shadow-lg: 0 38px 100px rgba(30, 12, 16, .2);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(200, 155, 82, .38) !important;
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   PUBLIC WEBSITE · boutique hotel experience
   ───────────────────────────────────────────── */

.site-header {
  top: 18px;
  left: clamp(18px, 3vw, 46px);
  right: clamp(18px, 3vw, 46px);
  width: auto;
  height: 78px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 20px;
  background: rgba(35, 13, 19, .76);
  box-shadow: 0 16px 48px rgba(18, 5, 9, .22);
  backdrop-filter: blur(22px) saturate(135%);
}
.site-header .public-brand { min-width: max-content; }
.site-header .brand-mark {
  width: 49px;
  height: 49px;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 252, 245, .95);
  box-shadow: none;
}
.site-header .public-brand b { font-size: 15px; letter-spacing: .16em; }
.site-header .public-brand small { margin-top: 3px; color: var(--je-gold-light); letter-spacing: .13em; }
.site-header nav { gap: clamp(14px, 2vw, 30px); }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
.site-header .nav-book,
.site-header .nav-login {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 13px;
}
.site-header .nav-book { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .06); }
.site-header .nav-login { border-color: var(--je-paper); background: var(--je-paper); box-shadow: none; }

.hero {
  min-height: 940px;
  padding-top: 150px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.hero-backdrop { transform: scale(1.015); filter: saturate(.92) contrast(1.03); }
.hero::before {
  background:
    linear-gradient(90deg, rgba(30, 7, 13, .94) 0%, rgba(45, 13, 20, .73) 37%, rgba(33, 12, 17, .26) 71%, rgba(18, 7, 9, .12) 100%),
    linear-gradient(0deg, rgba(21, 6, 10, .64), transparent 42%);
}
.hero-copy { max-width: 760px; }
.hero .eyebrow.light { color: var(--je-gold-light); }
.hero h1 {
  max-width: 720px;
  font-size: clamp(70px, 7vw, 108px);
  line-height: .82;
  letter-spacing: -.045em;
}
.hero h1 em { color: #f0d5a4; }
.hero-intro { max-width: 560px; font-size: 16px; line-height: 1.75; }
.hero-actions { margin-top: 30px; }
.hero-primary {
  min-width: 190px;
  min-height: 56px;
  border-radius: 14px;
  background: var(--je-paper);
  color: var(--je-wine);
  box-shadow: 0 16px 38px rgba(16, 3, 6, .22);
}
.hero-primary:hover { background: #f2d7aa; color: var(--je-wine-deep); }
.hero-secondary { min-height: 52px; display: inline-flex; align-items: center; }
.hero-proof {
  margin-bottom: 89px;
  padding: 22px 0 22px 28px;
  border-left-color: rgba(255, 255, 255, .24);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .045), transparent);
}
.hero-proof b { color: var(--je-gold-light); font-size: 34px; }

.search-card {
  left: clamp(22px, 4vw, 64px);
  right: clamp(22px, 4vw, 64px);
  bottom: 28px;
  min-height: 178px;
  padding: 28px 30px 25px;
  grid-template-columns: minmax(160px, .65fr) minmax(210px, .88fr) minmax(440px, 2.15fr) minmax(165px, .7fr);
  gap: 22px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-top: 0;
  border-radius: 22px;
  background: rgba(255, 253, 249, .96);
  box-shadow: 0 30px 90px rgba(20, 6, 10, .3);
}
.search-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 22px 0 0 22px;
  background: linear-gradient(var(--je-gold-light), var(--je-gold));
}
.search-intro h2 { color: var(--je-wine-deep); font-size: 34px; line-height: .96; }
.plan-switch { border: 0; border-radius: 13px; background: #f0e7db; }
.plan-switch span { min-height: 60px; border-radius: 10px; }
.plan-switch input:checked + span { background: var(--je-wine-deep); }
.form-field > span, .booking-form label > span { color: #675a5b; font-size: 10px; }
.form-field input,
.form-field select,
.booking-form input,
.booking-form select,
.booking-auth-form input {
  min-height: 54px;
  border-color: rgba(89, 52, 54, .17);
  border-radius: 11px;
  background: #fff;
  font-size: 14px;
}
.search-button,
.primary-button {
  min-height: 56px;
  border-radius: 12px;
  background: var(--je-wine);
  box-shadow: 0 12px 28px rgba(99, 17, 38, .18);
}
.search-button:hover, .primary-button:hover { background: var(--je-wine-deep); }
.search-note, .large-group-contact { bottom: 7px; font-size: 9px; }

.service-ribbon {
  min-height: 150px;
  background:
    radial-gradient(circle at 15% 0, rgba(207, 165, 90, .12), transparent 25rem),
    var(--je-wine-deep);
}
.service-ribbon p { padding-inline: clamp(20px, 3vw, 44px); }
.service-ribbon b { font-size: 22px; }
.service-ribbon small { max-width: 230px; font-size: 10px; }
.service-ribbon p > span { color: var(--je-gold-light); }

.property-nav {
  min-height: 72px;
  background: rgba(255, 253, 249, .94);
  color: var(--je-ink);
  border-bottom: 1px solid var(--je-line);
  box-shadow: 0 8px 30px rgba(48, 28, 27, .07);
  backdrop-filter: blur(22px) saturate(140%);
}
.property-nav a { color: var(--je-muted); }
.property-nav a:hover { color: var(--je-wine); }
.property-nav > span { background: var(--je-line); }
.property-nav-rate { border: 0; border-radius: 12px; background: var(--je-wine); color: #fff !important; }

.inventory-section {
  padding-top: clamp(92px, 10vw, 150px);
  background:
    radial-gradient(circle at 92% 0, rgba(200, 155, 82, .18), transparent 34rem),
    linear-gradient(180deg, #f6efe5, #fbf7f1 65%, #fffdf9);
}
.section-heading h2,
.collection-lead h2,
.location-copy h2,
.about-copy h2 { letter-spacing: -.045em; }
.inventory-heading { padding-bottom: 34px; border-bottom: 1px solid var(--je-line); }
.availability-count { border-left-color: var(--je-gold); }
.availability-count b { color: var(--je-wine); }
.inventory-status { margin: 26px 0 18px; font-size: 13px; }
.studio-grid { gap: 28px; }
.hotel-room-card {
  border: 1px solid rgba(80, 47, 47, .1);
  border-radius: 22px;
  background: var(--je-paper);
  box-shadow: var(--je-shadow-md);
}
.hotel-room-card:hover { transform: translateY(-6px); box-shadow: 0 32px 75px rgba(57, 31, 29, .16); }
.hotel-room-media { min-height: 360px; border-radius: 21px 21px 0 0; }
.hotel-room-media::after {
  content: "JAIPUR EDIT";
  position: absolute;
  right: 18px;
  bottom: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 9px;
  background: rgba(43, 14, 21, .58);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  backdrop-filter: blur(10px);
}
.hotel-room-copy { padding: 28px 28px 30px; }
.hotel-room-copy h3 { color: var(--je-wine-deep); font-size: 38px; }
.hotel-room-copy > p:not(.room-eyebrow) { font-size: 13px; line-height: 1.7; }
.amenity-list span { border-color: var(--je-line); background: #f9f4ed; color: #64595a; }
.hotel-room-footer { border-top-color: var(--je-line); }
.hotel-room-footer strong { color: var(--je-wine); }
.select-category { min-height: 50px; border: 0; border-radius: 11px; background: var(--je-wine-deep); color: #fff; }
.select-category:hover { background: var(--je-wine); }
.select-category:disabled { background: #e9e1d7; color: #8d8380; }

.about-heaven { background: var(--je-paper); }
.about-image { border-radius: 170px 24px 24px 24px; box-shadow: var(--je-shadow-md); }
.parent-logo-card { border: 1px solid var(--je-line); border-radius: 20px; box-shadow: var(--je-shadow-sm); }
.about-copy p { font-size: 14px; line-height: 1.8; }
.about-facts { border-color: var(--je-line); border-radius: 18px; background: #faf5ed; }

.story-links { background: #f2e9dc; }
.story-link-grid { gap: 20px; }
.story-link-grid a {
  min-height: 315px;
  border: 1px solid var(--je-line);
  border-radius: 20px;
  background: rgba(255, 253, 249, .84);
  box-shadow: var(--je-shadow-sm);
}
.story-link-grid a:nth-child(2), .story-link-grid a:nth-child(5) { background: var(--je-wine); }
.story-link-grid a:nth-child(3), .story-link-grid a:nth-child(6) { background: #4f5c4d; }
.story-link-grid a:hover { transform: translateY(-5px); box-shadow: var(--je-shadow-md); }
.story-link-grid h3 { font-size: 33px; }
.story-link-grid p { font-size: 12px; }

.collection-section { background: linear-gradient(135deg, #e5d7c5, #f1e8dd); }
.collection-details article { border-top-color: rgba(63, 38, 39, .18); }
.collection-details h3 { color: var(--je-wine-deep); }
.location-copy { background: var(--je-wine-deep); }
.location-copy .text-link { color: var(--je-gold-light); }
footer { background: #241216; }

.booking-sheet {
  border: 1px solid rgba(235, 211, 168, .45);
  border-radius: 24px 0 0 24px;
  background: var(--je-paper);
  box-shadow: -36px 0 110px rgba(17, 4, 8, .42);
}
.sheet-header { background: linear-gradient(135deg, var(--je-wine), var(--je-wine-deep)); }
.booking-steps { background: #fbf6ef; }
.booking-summary { border-radius: 16px; background: linear-gradient(135deg, var(--je-wine), var(--je-wine-deep)); }
.booking-auth-card, .booking-code, .booking-signed-in { border-radius: 14px; }
.booking-submit { min-height: 56px; border-radius: 12px; }

.mobile-book-dock { display: none; }

/* ─────────────────────────────────────────────
   ADMIN / TEAM WORKSPACE · calm command centre
   ───────────────────────────────────────────── */

.app-shell { --sidebar: 276px; background: #f5f1eb; color: var(--je-ink); }
.app-shell .sidebar {
  width: var(--sidebar);
  padding: 20px 14px 16px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 8% 0, rgba(216, 170, 92, .16), transparent 18rem),
    linear-gradient(178deg, #46101d 0%, #2d0e16 48%, #211015 100%);
}
.app-shell .sidebar::after {
  content: "";
  position: fixed;
  left: -120px;
  bottom: -155px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(236, 206, 151, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(236, 206, 151, .025), 0 0 0 144px rgba(236, 206, 151, .018);
  pointer-events: none;
}
.app-shell .sidebar-brand { min-height: 66px; padding: 5px 8px 18px; }
.app-shell .sidebar-brand .brand-mark { width: 49px; height: 49px; background: rgba(255, 253, 249, .96); }
.app-shell .sidebar-brand strong { font-size: 16px; letter-spacing: .07em; }
.app-shell .sidebar-brand > div > span { margin-top: 4px; color: #dabc89; font-size: 8px; letter-spacing: .16em; }
.app-shell .nav-group { margin-top: 20px; }
.app-shell .nav-label { padding: 0 11px 7px; color: rgba(255, 255, 255, .42); font-size: 9px; letter-spacing: .16em; }
.app-shell .nav-item {
  min-height: 46px;
  margin: 3px 0;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
}
.app-shell .nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-shell .nav-item.active {
  border-color: rgba(238, 210, 163, .16);
  background: linear-gradient(100deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  color: #fff;
  box-shadow: 0 9px 24px rgba(10, 2, 5, .13);
}
.app-shell .nav-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: #e5c58f;
}
.app-shell .nav-item.active .nav-icon { background: #f3dfbb; color: var(--je-wine-deep); }
.app-shell .nav-count { min-width: 23px; min-height: 23px; display: grid; place-items: center; border-radius: 999px; background: #f0d19c; color: #3b1119; }
.app-shell .role-switch { min-height: 58px; border-radius: 14px; background: rgba(255, 255, 255, .055); }
.app-shell .role-switch:hover { background: rgba(255, 255, 255, .09); }

.app-shell .workspace { margin-left: var(--sidebar); background: #f5f1eb; }
.app-shell .topbar {
  height: 76px;
  padding: 0 clamp(18px, 2.3vw, 36px);
  border-bottom: 1px solid rgba(91, 58, 58, .1);
  background: rgba(250, 247, 242, .9);
  box-shadow: 0 8px 30px rgba(48, 29, 28, .035);
  backdrop-filter: blur(22px) saturate(130%);
}
.mobile-context { display: none; }
.app-shell .search { width: min(480px, 42vw); }
.app-shell .search input {
  height: 46px;
  padding-left: 42px;
  border: 1px solid rgba(83, 50, 52, .12);
  border-radius: 13px;
  background: #fffdf9;
  box-shadow: 0 6px 20px rgba(50, 29, 28, .035);
  font-size: 13px;
}
.app-shell .search::before { top: 12px; left: 15px; color: var(--je-wine); }
.app-shell .search-kbd { top: 10px; right: 9px; border-radius: 7px; background: #f2ece3; }
.app-shell .live-sync { min-height: 38px; border-radius: 999px; background: #fff; }
.app-shell .icon-button { width: 42px; height: 42px; border-radius: 12px; background: #fffdf9; }
.app-shell .button {
  min-height: 42px;
  padding: 0 15px;
  border-color: rgba(83, 50, 52, .14);
  border-radius: 11px;
  background: #fffdf9;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(53, 31, 30, .025);
}
.app-shell .button:hover { border-color: rgba(99, 17, 38, .28); background: #fff; transform: translateY(-1px); }
.app-shell .button.primary, .app-shell .button.accent {
  border-color: var(--je-wine);
  background: linear-gradient(135deg, #74152d, #541020);
  color: #fff;
  box-shadow: 0 10px 24px rgba(99, 17, 38, .16);
}
.app-shell .content { max-width: 1740px; padding: 34px clamp(22px, 2.7vw, 44px) 58px; }
.app-shell .page-head { margin-bottom: 25px; }
.app-shell .operating-date { margin-bottom: 7px; color: #96713c; font-size: 9px; letter-spacing: .13em; }
.app-shell .page-title h1 { color: var(--je-wine-deep); font-size: clamp(27px, 2.4vw, 36px); letter-spacing: -.04em; }
.app-shell .page-title p { margin-top: 6px; color: var(--je-muted); font-size: 13px; }
.app-shell .page-actions { gap: 9px; }

.app-shell .card {
  border: 1px solid rgba(79, 50, 50, .095);
  border-radius: 17px;
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 10px 34px rgba(55, 31, 30, .05);
}
.app-shell .card:hover { border-color: rgba(99, 17, 38, .14); }
.app-shell .card-head { padding: 20px 21px 15px; }
.app-shell .card-head h2 { color: #3f2429; font-size: 15px; }
.app-shell .card-head p { margin-top: 4px; font-size: 10px; }
.app-shell .kpi-grid { gap: 14px; margin-bottom: 18px; }
.app-shell .kpi-card {
  min-height: 132px;
  padding: 17px;
  overflow: hidden;
  text-align: left;
}
.app-shell .kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--je-gold);
}
.app-shell .kpi-card.due-alert::before { background: #c64f4f; }
.app-shell .kpi-top { font-size: 11px; }
.app-shell .kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f4ece0; color: var(--je-wine); }
.app-shell .kpi-value { margin: 14px 0 6px; color: #321c21; font-size: clamp(22px, 2vw, 30px); }
.app-shell .kpi-foot { font-size: 10px; }
.app-shell .dashboard-grid { grid-template-columns: minmax(0, 1.72fr) minmax(310px, .72fr); gap: 17px; }
.app-shell .stack { gap: 17px; }
.app-shell .unit-board { gap: 8px; padding: 0 18px 19px; }
.app-shell .unit-tile {
  min-height: 82px;
  padding: 11px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(65, 39, 41, .065);
}
.app-shell .unit-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(51, 29, 28, .09); }
.app-shell .unit-tile strong { font-size: 11px; }
.app-shell .unit-guest { font-size: 9px; }
.app-shell .unit-status { font-size: 8px; }
.app-shell .mini-grid { gap: 17px; }
.app-shell .timeline-item, .app-shell .action-item { min-height: 58px; padding: 11px 18px; }
.app-shell .action-icon { width: 34px; height: 34px; border-radius: 10px; background: #f3e9da; color: var(--je-wine); }
.app-shell .toolbar {
  min-height: 66px;
  padding: 12px 16px;
  gap: 10px;
  border-bottom-color: var(--je-line);
  background: rgba(249, 245, 238, .65);
}
.app-shell .toolbar input, .app-shell .toolbar select {
  min-height: 42px;
  border-color: var(--je-line);
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
}
.app-shell .table-wrap { scrollbar-color: #cdb58e #f5efe7; }
.app-shell table { font-size: 11px; }
.app-shell thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  background: #f5efe6;
  color: #77696a;
  font-size: 8px;
  letter-spacing: .075em;
}
.app-shell tbody td { padding: 13px 14px; border-bottom-color: rgba(83, 50, 52, .08); }
.app-shell tbody tr:hover { background: #fcf7ef; }
.app-shell .person .avatar, .app-shell .avatar { background: #f0dfc5; color: var(--je-wine); }
.app-shell .entity-link:hover { color: var(--je-wine); text-decoration-color: rgba(99, 17, 38, .25); }
.app-shell .status-badge { min-height: 24px; padding: 4px 9px; border-radius: 999px; font-size: 8px !important; letter-spacing: .035em; }
.app-shell .field label { margin-bottom: 7px; color: #5f5152; font-size: 10px; }
.app-shell .field input, .app-shell .field select, .app-shell .field textarea, .app-shell .je-date-trigger {
  min-height: 46px;
  border-color: rgba(83, 50, 52, .16);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
}
.app-shell .field textarea { min-height: 104px; padding-block: 12px; }
.app-shell .field input:focus, .app-shell .field select:focus, .app-shell .field textarea:focus {
  border-color: var(--je-gold);
  box-shadow: 0 0 0 4px rgba(200, 155, 82, .12);
}
.app-shell .drawer {
  border-left: 1px solid rgba(200, 155, 82, .32);
  border-radius: 22px 0 0 22px;
  background: #fffdf9;
  box-shadow: -30px 0 100px rgba(40, 12, 20, .24);
}
.app-shell .modal { border-radius: 21px; background: #fffdf9; }
.app-shell .drawer-head, .app-shell .modal-head { padding: 23px 24px; background: linear-gradient(180deg, #fffefa, #faf5ed); }
.app-shell .drawer-head h2, .app-shell .modal-head h2 { color: var(--je-wine); font-size: 22px; }
.app-shell .drawer-body, .app-shell .modal-body { padding: 23px; }
.app-shell .drawer-foot { padding: 15px 22px calc(15px + env(safe-area-inset-bottom)); background: rgba(255, 253, 249, .92); backdrop-filter: blur(16px); }
.app-shell .detail-hero { border-radius: 15px; background: linear-gradient(135deg, #f5ead9, #fcf8f2); }
.app-shell .detail-box { border-radius: 12px; background: #faf6ef; }
.app-shell .empty { min-height: 180px; }
.app-shell .calendar-card { border-radius: 18px; }
.app-shell .calendar-slot { border-radius: 9px; }
.app-shell .calendar-slot.available { color: var(--je-green); }
.app-shell .calendar-slot.booked { background: #efe2f1; color: #60416e; }

.mobile-dock { display: none; }

/* Team sign-in */
.login-shell { background: #f6f0e8; }
.login-story { background: linear-gradient(145deg, #571123, #2b0c14 68%, #1d0d11); }
.login-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, rgba(226, 191, 126, .18), transparent 28rem);
  pointer-events: none;
}
.login-copy, .story-metrics, .login-story .story-brand { position: relative; z-index: 1; }
.login-copy h1 { font-size: clamp(50px, 5vw, 78px); line-height: .9; }
.login-panel { background: #fbf7f1; }
.login-panel h2 { color: var(--je-wine-deep); }
.google-login, .login-action { min-height: 54px; border-radius: 12px; }
.login-action { background: var(--je-wine); }
.login-panel.pin-primary { display: flex; flex-direction: column; }
.login-panel.pin-primary > .eyebrow { order: 0; }
.login-panel.pin-primary > h2 { order: 1; }
.login-panel.pin-primary > p { order: 2; }
.login-panel.pin-primary > .pin-fallback { order: 3; }
.login-panel.pin-primary > .google-login { order: 4; margin-top: 28px; }
.login-panel.pin-primary > .login-divider { order: 5; }
.login-panel.pin-primary > .email-login-form { order: 6; }
.login-panel.pin-primary > .login-mode-link { order: 7; }
.login-panel.pin-primary > .auth-setup-notice { order: 8; }
.login-panel.pin-primary > .login-note { order: 9; }
.login-panel .pin-fallback > summary,
.login-panel .login-mode-link { min-height: 44px; display: flex; align-items: center; }
.login-panel .login-mode-link { justify-content: center; }

/* Guest stay link */
.guest-shell {
  background:
    radial-gradient(circle at 85% 0, rgba(210, 164, 85, .14), transparent 30rem),
    linear-gradient(180deg, #f8f2e9, #f3ece3);
}
.guest-top {
  min-height: 74px;
  padding: 14px clamp(15px, 4vw, 32px);
  background: linear-gradient(110deg, #641126, #341018);
  box-shadow: 0 12px 35px rgba(54, 7, 20, .18);
}
.guest-help a { min-height: 42px; padding-inline: 13px; border-radius: 11px; }
.guest-main { width: min(1160px, calc(100% - 36px)); margin: 34px auto 60px; }
.guest-welcome {
  position: relative;
  overflow: hidden;
  padding: clamp(25px, 4vw, 38px);
  border: 1px solid rgba(200, 155, 82, .26);
  border-radius: 22px;
  background: linear-gradient(135deg, #fffdf9, #fbf3e6);
  box-shadow: var(--je-shadow-sm);
}
.guest-welcome::after {
  content: "";
  position: absolute;
  right: -74px;
  bottom: -112px;
  width: 260px;
  height: 260px;
  border: 36px solid rgba(200, 155, 82, .07);
  border-radius: 50%;
}
.guest-welcome h1 { color: var(--je-wine-deep); font-size: clamp(34px, 4.5vw, 50px); }
.guest-card, .identity-card, .guest-payment-card, .guest-feedback-card, .guest-discovery {
  border-radius: 18px;
  box-shadow: 0 12px 38px rgba(65, 38, 33, .055);
}
.guest-onboarding { gap: 16px; }
.onboarding-step summary { min-height: 64px; }
.guest-payment-card { padding: clamp(20px, 4vw, 32px); }
.guest-payment-total { border-radius: 14px; background: linear-gradient(135deg, var(--je-wine), var(--je-wine-deep)); }
.guest-payment-breakdown article { border-radius: 12px; }
.guest-payment-actions .button { min-height: 52px; }
.guest-discovery { background: linear-gradient(145deg, #243832, #17241f); }

/* ─────────────────────────────────────────────
   GUEST ACCOUNT · private booking library
   ───────────────────────────────────────────── */

.account-header {
  min-height: 78px;
  padding: 0 clamp(18px, 4vw, 58px);
  border-bottom: 1px solid var(--je-line);
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 8px 32px rgba(50, 29, 28, .05);
  backdrop-filter: blur(20px);
}
.account-header .account-brand > span:first-child { border-radius: 13px; background: #f7eddf; }
.account-header .book-link, .account-nav button { min-height: 44px; border-radius: 11px; }
.auth-shell { background: #f8f3ec; }
.auth-story {
  background:
    radial-gradient(circle at 18% 10%, rgba(221, 178, 101, .18), transparent 30rem),
    linear-gradient(145deg, #641126, #2d0d15 70%);
}
.auth-story::after { border-color: rgba(234, 211, 168, .11); }
.story-copy h1 { font-size: clamp(58px, 6vw, 92px); line-height: .86; }
.story-copy h1 em { color: var(--je-gold-light); }
.auth-panel { background: #f8f3ec; }
.auth-card {
  border: 1px solid var(--je-line);
  border-radius: 22px;
  background: #fffdf9;
  box-shadow: var(--je-shadow-md);
}
.auth-card h2 { color: var(--je-wine-deep); }
.auth-form input { min-height: 52px; border-radius: 11px; font-size: 15px; }
.auth-submit, .google-button { min-height: 54px; border-radius: 11px; }
.auth-submit { background: var(--je-wine); }
.account-main { max-width: 1240px; }
.account-welcome {
  overflow: hidden;
  border: 1px solid rgba(200, 155, 82, .24);
  border-radius: 22px;
  background: linear-gradient(135deg, #fffdf9, #fbf1e3);
  box-shadow: var(--je-shadow-sm);
}
.account-welcome h1 { color: var(--je-wine-deep); }
.account-identity { border-radius: 14px; background: var(--je-wine-deep); }
.booking-section-head { margin-top: 38px; }
.account-bookings { gap: 14px; }
.account-booking {
  border: 1px solid var(--je-line);
  border-radius: 17px;
  background: #fffdf9;
  box-shadow: var(--je-shadow-sm);
}
.account-booking:hover { transform: translateY(-2px); box-shadow: var(--je-shadow-md); }
.room-mark { border-radius: 13px; background: #f2e3cc; color: var(--je-wine); }
.booking-actions a { min-height: 42px; border-radius: 10px; background: var(--je-wine); }
.booking-actions a.secondary { border-color: var(--je-line); background: #fff; color: var(--je-wine); }

/* ─────────────────────────────────────────────
   EDITORIAL / SEO PAGES
   ───────────────────────────────────────────── */

.content-header {
  top: 18px;
  left: clamp(18px, 3vw, 46px);
  right: clamp(18px, 3vw, 46px);
  width: auto;
  height: 78px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 20px;
  background: rgba(36, 13, 19, .78);
  box-shadow: 0 16px 48px rgba(18, 5, 9, .2);
  backdrop-filter: blur(22px) saturate(135%);
}
.content-header .brand-mark { background: var(--je-paper); }
.content-header nav { gap: clamp(13px, 2vw, 28px); }
.content-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.content-header .content-book, .content-header .content-login { border-radius: 11px; }
.page-hero { min-height: 760px; padding-top: 150px; }
.page-hero::before { background: linear-gradient(90deg, rgba(30, 7, 13, .9), rgba(44, 13, 20, .55) 53%, rgba(20, 7, 10, .18)); }
.page-hero-copy { max-width: 720px; }
.page-hero h1 { font-size: clamp(64px, 7vw, 102px); line-height: .84; letter-spacing: -.045em; }
.page-hero h1 em { color: var(--je-gold-light); }
.primary-link { min-height: 52px; border-radius: 12px; }
.intro-block, .room-row, .feature-card, .info-card, .guide-card, .rate-card, .faq-item, .compare-table, .contact-band {
  border-color: var(--je-line);
  border-radius: 18px;
  box-shadow: var(--je-shadow-sm);
}
.room-row { overflow: hidden; background: var(--je-paper); }
.room-row img { min-height: 360px; object-fit: cover; }
.room-row-copy { padding: clamp(28px, 5vw, 64px); }
.room-row-copy h2, .content-section h2 { color: var(--je-wine-deep); letter-spacing: -.04em; }
.feature-card:hover, .info-card:hover, .guide-card:hover { transform: translateY(-4px); box-shadow: var(--je-shadow-md); }
.site-footer { background: #241216; }

/* ─────────────────────────────────────────────
   RESPONSIVE PRODUCT BEHAVIOUR
   ───────────────────────────────────────────── */

@media (max-width: 1180px) {
  .search-card { grid-template-columns: 1fr 1.2fr; }
  .search-grid { grid-column: 1 / -1; }
  .search-button { grid-column: 2; }
  .app-shell .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell .dashboard-grid { grid-template-columns: 1fr; }
  .app-shell .dashboard-grid > aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app-shell { --sidebar: 0px; }
  .app-shell .sidebar { width: min(310px, 88vw); border-radius: 0 22px 22px 0; }
  .app-shell .workspace { margin-left: 0; }
  .app-shell .content { padding: 25px 17px calc(112px + env(safe-area-inset-bottom)); }
  .app-shell .dashboard-grid > aside { grid-template-columns: 1fr; }
  .app-shell .topbar { height: 70px; padding-inline: 13px; }
  .app-shell .mobile-menu { display: grid; place-items: center; }
  .mobile-context { min-width: 0; display: grid; line-height: 1.1; }
  .mobile-context b { overflow: hidden; color: var(--je-wine-deep); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-context small { margin-top: 3px; color: var(--je-muted); font-size: 7px; letter-spacing: .13em; }
  .app-shell .search { order: 3; width: min(360px, 46vw); }
  .mobile-dock {
    position: fixed;
    z-index: 55;
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    min-height: 70px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 19px;
    background: rgba(45, 13, 21, .94);
    box-shadow: 0 18px 50px rgba(31, 8, 14, .32);
    backdrop-filter: blur(22px) saturate(140%);
  }
  .mobile-dock button {
    min-width: 0;
    min-height: 54px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: rgba(255, 255, 255, .62);
    font-size: 8px;
    font-weight: 700;
  }
  .mobile-dock button b { font-size: 18px; font-weight: 500; line-height: 1; }
  .mobile-dock button.active { background: #f2dfbd; color: var(--je-wine-deep); }
  .mobile-dock button:active { transform: scale(.96); }
  /* Keep the sign-in controls in the first viewport on tablets and phones. */
  .login-shell { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
  .login-panel {
    order: 1;
    width: min(560px, calc(100% - 32px));
    margin: 24px auto;
    padding: 30px;
    border: 1px solid rgba(92, 7, 22, .1);
    border-radius: 22px;
    box-shadow: 0 20px 56px rgba(45, 13, 21, .1);
  }
  .login-story {
    order: 2;
    min-height: auto;
    gap: 28px;
    padding: 34px 28px;
  }
  .login-copy h1 { font-size: clamp(42px, 9vw, 62px); }
  .story-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body:has(.site-header) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .site-header {
    top: 10px;
    left: 10px;
    right: 10px;
    height: 66px;
    padding: 0 10px;
    border-radius: 16px;
  }
  .site-header .brand-mark { width: 42px; height: 42px; }
  .site-header .public-brand b { font-size: 12px; }
  .site-header .public-brand small { font-size: 5px; }
  .site-header nav a:not(.nav-login):not(.nav-book) { display: none; }
  .site-header .nav-book { display: none; }
  .site-header .nav-login { min-height: 42px; padding: 0 13px; border-radius: 11px; font-size: 10px; }
  .hero { min-height: 0; padding: 108px 13px 32px; }
  .hero-backdrop { transform: none; background-position: 61% center; }
  .hero::before { background: linear-gradient(90deg, rgba(28, 7, 13, .91), rgba(39, 12, 18, .62) 70%, rgba(25, 8, 11, .35)); }
  .hero-copy { padding-inline: 6px; }
  .hero h1 { max-width: 520px; font-size: clamp(56px, 16vw, 80px); line-height: .86; }
  .hero-intro { max-width: 460px; font-size: 14px; line-height: 1.65; }
  .hero-actions { gap: 15px; }
  .hero-primary { min-width: 170px; min-height: 52px; }
  .hero-proof { display: none; }
  .search-card {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 38px;
    padding: 21px 16px 24px;
    grid-template-columns: 1fr;
    gap: 15px;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 6, 10, .26);
  }
  .search-card::before { inset: 0 0 auto; width: auto; height: 4px; border-radius: 18px 18px 0 0; }
  .search-intro h2 { font-size: 30px; }
  .plan-switch, .search-grid, .search-button { grid-column: 1; }
  .search-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .form-field input, .form-field select, .booking-form input, .booking-form select { min-height: 54px; font-size: 16px; }
  .search-button { min-height: 56px; }
  .search-note, .large-group-contact { position: static; }
  .large-group-contact { flex-wrap: wrap; padding: 5px 2px 0; }
  .service-ribbon { padding: 18px; }
  .service-ribbon p { min-height: 70px; }
  .property-nav { top: 0; width: 100%; max-width: 100vw; min-height: 58px; padding: 0 14px; }
  .property-nav strong { display: none; }
  .inventory-section, .room-profiles { width: 100%; min-width: 0; max-width: 100%; padding: 72px 15px; overflow: hidden; }
  .inventory-heading { gap: 15px; padding-bottom: 24px; }
  .studio-grid { width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hotel-room-card, .hotel-room-media { width: 100%; min-width: 0; max-width: 100%; }
  .hotel-room-media { min-height: 260px; }
  .hotel-room-copy { padding: 23px 19px 25px; }
  .hotel-room-copy h3 { font-size: 34px; }
  .hotel-room-footer { align-items: stretch; flex-direction: column; }
  .hotel-room-footer .select-category { width: 100%; }
  .about-heaven, .story-links, .collection-section { padding: 72px 18px; }
  .story-link-grid a { min-height: 255px; }
  .location-copy { padding: 66px 20px; }
  .booking-modal { padding: 0; align-items: end; }
  .booking-sheet { width: 100%; height: min(95dvh, 920px); border-radius: 23px 23px 0 0; }
  .sheet-header { border-radius: 22px 22px 0 0; }
  .mobile-book-dock {
    position: fixed;
    z-index: 46;
    left: 10px;
    right: 10px;
    bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 7px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 17px;
    background: rgba(43, 13, 20, .94);
    box-shadow: 0 18px 48px rgba(27, 7, 12, .34);
    backdrop-filter: blur(20px);
  }
  .mobile-book-dock a {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-book-dock a:first-child { background: #f1d9ad; color: var(--je-wine-deep); }
  .mobile-book-dock a b { font-size: 16px; }
  .auth-shell { display: block; }
  .auth-story { min-height: 44vh; padding: 32px 22px; }
  .story-copy h1 { font-size: clamp(54px, 15vw, 76px); }
  .auth-panel { padding: 20px 12px 35px; }
  .auth-card { padding: 25px 19px; border-radius: 18px; }
  .account-header { min-height: 68px; padding: 0 13px; }
  .account-nav a:not(.book-link) { display: none; }
  .account-main { padding-inline: 12px; }
  .account-welcome { grid-template-columns: 1fr; padding: 24px 19px; }
  .account-identity { min-width: 0; }
  .account-booking { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .booking-actions { grid-template-columns: 1fr 1fr; }
  .content-header {
    top: 10px;
    left: 10px;
    right: 10px;
    height: 66px;
    padding: 0 10px;
    border-radius: 16px;
  }
  .content-header nav a:not(.content-book):not(.content-login) { display: none; }
  .content-header .content-login { display: none; }
  .content-header .content-book { min-height: 42px; padding-inline: 13px; }
  .page-hero { min-height: 680px; padding: 112px 18px 70px; }
  .page-hero h1 { font-size: clamp(57px, 15vw, 78px); }
  .room-row { grid-template-columns: 1fr; }
  .room-row img { min-height: 260px; }
}

@media (max-width: 640px) {
  .login-panel {
    width: calc(100% - 24px);
    margin: 12px auto 20px;
    padding: 25px 18px;
    border-radius: 18px;
  }
  .login-panel h2 { font-size: 25px; }
  .login-story { min-height: auto; padding: 30px 18px; }
  .login-copy h1 { font-size: clamp(40px, 13vw, 55px); }
  .login-copy p { max-width: 46ch; font-size: 13px; line-height: 1.6; }
  .story-metrics { gap: 7px; }
  .story-metric { min-width: 0; padding: 11px 9px; }
  .story-metric b { font-size: 17px; }
  .story-metric span { overflow-wrap: anywhere; font-size: 7px; }
  .pin-fallback .role-choice { min-height: 58px; padding: 9px; }
  .pin-fallback .role-choice .role-icon { margin-bottom: 2px; }
  .app-shell .topbar {
    height: auto;
    min-height: 66px;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .app-shell .search { order: 5; flex: 1 0 100%; width: 100%; max-width: none; }
  .app-shell .search input { height: 43px; padding-inline: 37px 10px; font-size: 16px; }
  .app-shell .search::before { left: 12px; top: 11px; }
  .app-shell .search-kbd, .app-shell .live-sync span, .app-shell .topbar .quick-add, .app-shell #notifications { display: none; }
  .mobile-context { flex: 1; max-width: none; }
  .app-shell .content { padding: 21px 12px calc(108px + env(safe-area-inset-bottom)); }
  .app-shell .page-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .app-shell .page-title h1 { font-size: 28px; }
  .app-shell .page-actions { display: grid; grid-template-columns: 1fr; }
  .app-shell .page-actions .button { width: 100%; }
  .app-shell .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .app-shell .kpi-card { min-height: 118px; padding: 14px 13px; }
  .app-shell .kpi-top > span:first-child { max-width: 95px; }
  .app-shell .kpi-value { font-size: 23px; }
  .app-shell .card { border-radius: 15px; }
  .app-shell .card-head { padding: 17px 15px 12px; }
  .app-shell .unit-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 12px 15px; }
  .app-shell .unit-tile { min-height: 76px; padding: 9px; }
  .app-shell .mini-grid { grid-template-columns: 1fr; }
  .app-shell .toolbar { align-items: stretch; flex-direction: column; padding: 12px; }
  .app-shell .toolbar input, .app-shell .toolbar select, .app-shell .toolbar .button { width: 100%; min-width: 0; font-size: 16px; }
  .app-shell .drawer { width: 100%; border-radius: 0; }
  .app-shell .drawer-head, .app-shell .modal-head { padding: 17px 15px; }
  .app-shell .drawer-body, .app-shell .modal-body { padding: 16px 14px; }
  .app-shell .drawer-foot { position: sticky; bottom: 0; z-index: 6; padding: 11px 13px calc(11px + env(safe-area-inset-bottom)); }
  .app-shell .drawer-foot .button { min-height: 48px; }
  .guest-top { min-height: 66px; padding: 11px 12px; }
  .guest-help { gap: 5px; }
  .guest-help a { min-height: 40px; }
  .guest-main { width: min(100% - 20px, 1160px); margin: 18px auto 35px; }
  .guest-welcome { padding: 22px 18px; border-radius: 17px; }
  .guest-payment-card, .guest-card, .identity-card, .guest-feedback-card { border-radius: 15px; }
  .guest-payment-head, .guest-payment-actions { grid-template-columns: 1fr; }
  .guest-payment-breakdown { grid-template-columns: 1fr 1fr; }
  .search-grid { grid-template-columns: 1fr; }
  .room-count-field, .guest-field { grid-column: 1; }

  /* Guest account rows become readable cards instead of a clipped desktop table. */
  #passbook-accounts .table-wrap { overflow: visible; }
  #passbook-accounts table,
  #passbook-accounts tbody { display: block; width: 100%; min-width: 0; }
  #passbook-accounts thead { display: none; }
  #passbook-accounts tbody { display: grid; gap: 10px; padding: 0 12px 14px; }
  #passbook-accounts tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--je-line);
    border-radius: 14px;
    background: #fffdf9;
    box-shadow: 0 9px 24px rgba(55, 29, 27, .05);
  }
  #passbook-accounts tbody td {
    display: grid;
    grid-template-columns: minmax(94px, .42fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--je-line);
    text-align: right;
    overflow-wrap: anywhere;
  }
  #passbook-accounts tbody td::before {
    color: var(--je-muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
  }
  #passbook-accounts tbody td:nth-child(1)::before { content: "Guest"; }
  #passbook-accounts tbody td:nth-child(2)::before { content: "Mobile"; }
  #passbook-accounts tbody td:nth-child(3)::before { content: "Stay"; }
  #passbook-accounts tbody td:nth-child(4)::before { content: "KYC"; }
  #passbook-accounts tbody td:nth-child(5)::before { content: "Billed"; }
  #passbook-accounts tbody td:nth-child(6)::before { content: "Collected"; }
  #passbook-accounts tbody td:nth-child(7)::before { content: "Due"; }
  #passbook-accounts tbody td:nth-child(8)::before { content: "Last entry"; }
  #passbook-accounts tbody td:last-child { display: block; padding: 11px 12px; border-bottom: 0; }
  #passbook-accounts tbody td:last-child::before { display: none; }
  #passbook-accounts tbody td:last-child .button { width: 100%; min-height: 46px; }
  #passbook-accounts tbody .person { min-width: 0; justify-content: flex-end; text-align: right; }
  #passbook-accounts tbody tr:has(.empty) td { display: block; }
  #passbook-accounts tbody tr:has(.empty) td::before { display: none; }
}

@media (max-width: 390px) {
  .site-header .public-brand > span:last-child { display: none; }
  .site-header { justify-content: space-between; }
  .hero h1 { font-size: 57px; }
  .mobile-context { display: none; }
  .app-shell .kpi-card { min-height: 112px; }
  .app-shell .unit-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.account-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border-bottom-color: rgba(255, 255, 255, .16);
  background: rgba(45, 13, 21, .97);
  color: #fff;
  box-shadow: 0 8px 32px rgba(50, 29, 28, .14);
}
.account-session-email { color: rgba(255, 255, 255, .8); }
.account-identity { background: var(--je-wine-deep); color: #fff; }
.account-identity span, .account-identity small { color: rgba(255, 255, 255, .72); }
.account-identity strong { color: #fff; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .account-header { padding: 0 13px; gap: 8px; }
  .account-header .account-brand > span:last-child { display: none; }
  .account-nav { gap: 6px; }
  .account-nav > a { display: none !important; }
  .account-session-email { max-width: clamp(92px, 34vw, 150px); font-size: 9px; }
  .account-nav button { min-height: 40px; padding-inline: 11px; }
}

/* Final guided-KYC layout overrides */
.guest-onboarding > .kyc-journey-head,
.guest-onboarding > .kyc-participant-switcher,
.guest-onboarding > #guest-identity-card { grid-column: 1 / -1; }
.kyc-participant-switcher { grid-template-columns: minmax(190px,.46fr) minmax(0,1.54fr); padding: 18px; border-radius: 19px; background: #fff; box-shadow: 0 12px 34px rgba(73,43,32,.055); }
.kyc-participant-buttons button { min-height: 72px; padding: 12px 14px; border-radius: 14px; }
.kyc-participant-buttons button.active { border-color: #7b1730; background: #fff5f7; box-shadow: 0 0 0 3px rgba(123,23,48,.09); }
@media (max-width: 700px) {
  .kyc-participant-switcher { grid-template-columns: 1fr; padding: 15px; }
  .kyc-participant-buttons { display: flex; grid-template-columns: none; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .kyc-participant-buttons button { min-width: 145px; scroll-snap-align: start; }
}