/*
 * baber.app — site styles
 * brand v3 monochrome editorial. pure #000 / #fff. no accent.
 */

:root {
  --ink: #000;
  --paper: #fff;
  --dim: #8a8a8e;
  --dim-2: #b5b5ba;
  --hair: rgba(0, 0, 0, 0.08);
  --hair-strong: rgba(0, 0, 0, 0.18);
  --tint: rgba(0, 0, 0, 0.04);
  --tint-2: rgba(0, 0, 0, 0.06);
  --red: #c81a1a;
  --max: 1480px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* -------- Nav -------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

.nav-right { display: flex; gap: 10px; align-items: center; }

/* Language switcher — pill button + dropdown */
.lang-wrap { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] {
  background: var(--tint);
  border-color: var(--hair);
}
.lang-globe { opacity: 0.7; }
.lang-caret { opacity: 0.5; transition: transform 0.18s ease; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 6px;
  margin: 0;
  list-style: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}
.lang-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-menu li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.lang-menu li:hover { background: var(--tint); }
.lang-menu li:focus { outline: none; background: var(--tint-2); }
.lang-menu li:focus-visible { outline: 2px solid var(--ink); outline-offset: -1px; }
.lang-menu li.active { background: var(--ink); color: #fff; }
.lang-menu li[aria-selected="true"]::before {
  content: "✓";
  margin-right: 4px;
  font-weight: 800;
}
.lang-menu li[aria-selected="true"].active::before { color: #fff; }
.lang-menu li small { font-size: 11px; opacity: 0.6; font-weight: 700; letter-spacing: 0.04em; }

@media (max-width: 880px) {
  .lang-btn span { display: none; }
}

.btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
}
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.ghost { background: transparent; }

.signed-in-pill {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.signed-in-pill .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
body.signed-in .signed-in-pill { display: flex; }
body.signed-in .nav-right .show-when-logged-out { display: none; }

/* -------- Page container --------
 * The page centers within a max-width and grows with the viewport, so
 * content stays balanced even on ultra-wide screens (the Uber-style
 * layout). Sections that need to bleed to the edge (hero gradient,
 * dark sections, footer) still do so because they sit OUTSIDE the
 * .page or use their own max-width. */
.page { display: none; max-width: var(--max); margin: 0 auto; }
.page.active { display: block; }

.container { padding: 36px 48px; max-width: var(--max); margin: 0 auto; }

/* -------- Landing hero -------- */
.hero {
  padding: 64px 48px 48px;
  background: transparent;
}
.hero h1 {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 820px;
}
.hero h1 em {
  font-style: normal;
}

/* Cycling action word — slot-machine animation, no pill chrome and
   no underline. Grid stacking keeps all four spans in the same cell
   so the container width snaps to the widest word and the
   surrounding text never reflows. */
.hero h1 .hero-cycle {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  position: relative;
  color: var(--ink);
}
.hero h1 .hero-cycle span {
  grid-row: 1;
  grid-column: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  animation: heroCycleSlot 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  line-height: inherit;
}
.hero h1 .hero-cycle span:nth-child(1) { animation-delay: 0s; }
.hero h1 .hero-cycle span:nth-child(2) { animation-delay: 2.5s; }
.hero h1 .hero-cycle span:nth-child(3) { animation-delay: 5s; }
.hero h1 .hero-cycle span:nth-child(4) { animation-delay: 7.5s; }

@keyframes heroCycleSlot {
  0%   { opacity: 0; transform: translateY(110%); }
  4%   { opacity: 1; transform: translateY(0); }
  21%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-110%); }
  100% { opacity: 0; transform: translateY(-110%); }
}

.nowrap { white-space: nowrap; }

/* Screen-reader-only fallback for the cycling word. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.hero p {
  font-size: 17px;
  color: var(--dim);
  margin: 0 0 28px;
  max-width: 560px;
  line-height: 1.5;
}
.hero-search {
  display: flex;
  gap: 8px;
  max-width: 680px;
  background: #fff;
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.hero-search .field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  position: relative;
}
.hero-search .field svg { width: 16px; height: 16px; color: var(--dim); }
.hero-search .field input {
  border: 0;
  outline: 0;
  font-size: 14px;
  flex: 1;
  background: transparent;
  font-family: inherit;
  position: relative;
  z-index: 2;
}

/* Slot-machine placeholder — phrases slide up and out, one after the
   other, on a continuous loop. Hidden the moment the user focuses
   the input or types anything. */
.ph-cycle {
  position: absolute;
  left: 36px;
  right: 12px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  font-size: 14px;
  color: var(--dim);
  z-index: 1;
  height: 100%;
  line-height: 1;
  transition: opacity 0.18s ease;
}
.ph-cycle span {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateY(100%);
  animation: phSlot 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  white-space: nowrap;
}
.ph-cycle span:nth-child(1) { animation-delay: 0s; }
.ph-cycle span:nth-child(2) { animation-delay: 2.8s; }
.ph-cycle span:nth-child(3) { animation-delay: 5.6s; }
.ph-cycle span:nth-child(4) { animation-delay: 8.4s; }
.ph-cycle span:nth-child(5) { animation-delay: 11.2s; }

/* 4-phrase variant (location field) — divide by 4 instead of 5. */
.ph-cycle:has(span:nth-child(4):last-child) span { animation-duration: 11.2s; }
.ph-cycle:has(span:nth-child(4):last-child) span:nth-child(1) { animation-delay: 0s; }
.ph-cycle:has(span:nth-child(4):last-child) span:nth-child(2) { animation-delay: 2.8s; }
.ph-cycle:has(span:nth-child(4):last-child) span:nth-child(3) { animation-delay: 5.6s; }
.ph-cycle:has(span:nth-child(4):last-child) span:nth-child(4) { animation-delay: 8.4s; }

@keyframes phSlot {
  0%      { opacity: 0; transform: translateY(110%); }
  4%      { opacity: 1; transform: translateY(0); }
  17%     { opacity: 1; transform: translateY(0); }
  21%     { opacity: 0; transform: translateY(-110%); }
  100%    { opacity: 0; transform: translateY(-110%); }
}

/* Hide cycle on focus or when the user has typed something. */
.hero-search .field:focus-within .ph-cycle,
.hero-search .field input:not(:placeholder-shown) ~ .ph-cycle {
  opacity: 0;
}
.hero-search .divider { width: 1px; background: var(--hair); margin: 6px 0; }
.hero-search .go {
  padding: 12px 24px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  border: 0;
}
.hero-meta { display: flex; gap: 24px; margin-top: 22px; color: var(--dim); font-size: 13px; }
.hero-meta strong { color: var(--ink); font-weight: 700; }

/* -------- Section heads + grids -------- */
.section-head {
  padding: 32px 48px 12px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.section-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.section-head .sub {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 700;
}
.section-head a { font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 8px 48px 36px;
}
.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 8px 36px 36px;
}

.shop-card {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); }

.shop-img {
  height: 180px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: end;
  padding: 12px;
}
.shop-img.has-img {
  background-color: #1a1a1a;
}
.shop-img.has-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.shop-img.alt1 { background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%); }
.shop-img.alt2 { background: linear-gradient(135deg, #2a2a2a 0%, #444 100%); }
.shop-img.alt3 { background: linear-gradient(135deg, #181818 0%, #303030 100%); }
.shop-img .badge {
  background: #fff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.shop-img .scissors {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
}
.shop-body { padding: 12px 14px 14px; }
.shop-body h3 { font-size: 15px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.shop-body .meta { font-size: 12px; color: var(--dim); display: flex; gap: 10px; }
.shop-body .meta b { color: var(--ink); font-weight: 700; }

/* -------- Uber-style content blocks -------- */
.content-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 48px;
}
.content-block.alt { background: #fafafa; }
.cb-text h2 {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 460px;
}
.cb-text p {
  font-size: 16px;
  color: var(--dim);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 460px;
}
.cb-cta {
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cb-cta:hover { background: #222; }
.cb-art svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin-left: auto;
}
body.signed-in #cbSignup { display: none; }

/* -------- Marketing sections (light) -------- */
.dark-section {
  background: var(--paper);
  color: var(--ink);
}
.dark-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 88px 48px;
}
.dark-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}
.dark-h {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 56px;
  color: var(--ink);
}
.dark-p {
  font-size: 16px;
  color: var(--dim);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 460px;
}

/* How it works — 3 step cards */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-top: -16px;
}
.step { text-align: center; }
.step-art { margin-bottom: 14px; }
.step-art svg { width: 100%; max-width: 200px; display: block; margin: 0 auto; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  margin: 0 auto 10px;
}
.step h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.step p {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 240px;
}

/* For barbers — text + illustration split */
.for-barbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.for-barbers .dark-kicker, .for-barbers .dark-h {
  text-align: left;
  margin-bottom: 14px;
}
.for-barbers .dark-h { margin-bottom: 18px; }
.fb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  max-width: 460px;
}
/* Feature selectors — plain text. The active one is marked by a
   1.5 px underline that slides in from the left; hover does the same
   for the non-active labels and retracts to the right on exit. */
.fb-pills { gap: 18px 22px; }
.fb-pill {
  padding: 4px 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: opacity 0.18s ease;
  opacity: 0.45;
}
.fb-pill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fb-pill:hover { opacity: 1; }
.fb-pill:hover::after { transform: scaleX(1); }
.fb-pill:not(:hover):not(.active)::after { transform-origin: right center; }
.fb-pill.active { opacity: 1; }
.fb-pill.active::after { transform: scaleX(1); transform-origin: left center; }
.fb-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.fb-cta:hover { background: #222; }
.fb-art svg { width: 100%; max-width: 480px; display: block; margin-left: auto; }

/* Stack-card: 5 absolutely-positioned cards that fan out behind the
   active one. data-active="<id>" on .stack-cards picks the one to
   bring forward. */
.stack-cards {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 380px;
  margin-left: auto;
}
.stack-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid var(--hair-strong);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.3s ease,
              filter 0.3s ease,
              box-shadow 0.3s ease;
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Default fan layout — each card sits offset and slightly rotated.
   Active card overrides with translate(0)/rotate(0)/scale(1.02). */
.stack-cards .stack-card:nth-child(1) { transform: translate(0, 0)     rotate(0deg);   z-index: 5; }
.stack-cards .stack-card:nth-child(2) { transform: translate(18px, -8px)  rotate(2.5deg); z-index: 4; }
.stack-cards .stack-card:nth-child(3) { transform: translate(36px, -16px) rotate(5deg);   z-index: 3; }
.stack-cards .stack-card:nth-child(4) { transform: translate(54px, -24px) rotate(7.5deg); z-index: 2; }
.stack-cards .stack-card:nth-child(5) { transform: translate(72px, -32px) rotate(10deg);  z-index: 1; }
.stack-cards .stack-card:not([data-active]):nth-child(n+2) { filter: brightness(0.96); }

/* Active state — the card whose data-card matches the parent's
   data-active comes to the front and centers. */
.stack-cards[data-active="booking"]       .stack-card[data-card="booking"],
.stack-cards[data-active="revenue"]       .stack-card[data-card="revenue"],
.stack-cards[data-active="queue"]         .stack-card[data-card="queue"],
.stack-cards[data-active="summaries"]     .stack-card[data-card="summaries"],
.stack-cards[data-active="notifications"] .stack-card[data-card="notifications"] {
  transform: translate(-18px, -10px) rotate(-1.5deg) scale(1.03);
  z-index: 10;
  box-shadow: 0 28px 60px rgba(0,0,0,0.20);
  filter: brightness(1);
}

/* Push every non-active card slightly further back to make space. */
.stack-cards[data-active] .stack-card { filter: brightness(0.94); }
.stack-cards[data-active="booking"] .stack-card[data-card="booking"],
.stack-cards[data-active="revenue"] .stack-card[data-card="revenue"],
.stack-cards[data-active="queue"] .stack-card[data-card="queue"],
.stack-cards[data-active="summaries"] .stack-card[data-card="summaries"],
.stack-cards[data-active="notifications"] .stack-card[data-card="notifications"] {
  filter: brightness(1);
}

/* Card chrome */
.sc-header { display: flex; align-items: center; justify-content: space-between; }
.sc-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}
.sc-dot { width: 10px; height: 10px; border-radius: 50%; background: #4d7a4a; }
.sc-foot { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--hair); }
.sc-foot strong { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.sc-foot span { font-size: 12px; color: var(--dim); }

/* booking — calendar */
.sc-cal { background: var(--tint); border-radius: 12px; padding: 14px; }
.sc-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.sc-cal-row .d { font-size: 11px; color: var(--dim); text-align: center; font-weight: 700; }
.sc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sc-cal-grid .x {
  height: 28px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--ink);
}
.sc-cal-grid .x:empty { background: var(--tint-2); border-color: transparent; }
.sc-cal-grid .x.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* revenue */
.sc-rev { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sc-rev-big { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; }
.sc-rev-sub { font-size: 12px; color: #4d7a4a; font-weight: 700; }
.sc-chart { width: 100%; height: 90px; margin-top: 8px; }

/* queue */
.sc-q { display: flex; flex-direction: column; gap: 8px; }
.sc-q-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
}
.sc-q-row .av {
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sc-q-row .av.red { background: #c83838; }
.sc-q-row .av.nav { background: #1c3a5e; }
.sc-q-row .av.grn { background: #4d7a4a; }
.sc-q-row .t { font-size: 14px; font-weight: 700; }
.sc-q-row .m { font-size: 11px; font-weight: 700; color: var(--dim); }

/* summaries */
.sc-sum { display: flex; flex-direction: column; gap: 8px; }
.sc-sum-line {
  display: flex; justify-content: space-between;
  padding: 8px 12px;
  background: var(--tint);
  border-radius: 8px;
  font-size: 13px;
}
.sc-sum-line strong { font-weight: 800; }

/* notifications */
.sc-toast {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: var(--tint);
  border-radius: 12px;
  align-items: center;
}
.sc-toast.small { margin-top: 8px; }
.sc-bell { font-size: 18px; }
.sc-toast-text { display: flex; flex-direction: column; gap: 2px; }
.sc-toast-text strong { font-size: 13px; font-weight: 800; }
.sc-toast-text span { font-size: 11px; color: var(--dim); }

@media (max-width: 880px) {
  .stack-cards { max-width: 100%; height: 360px; margin: 0 auto; }
}

/* "get the app" pill — reactive on hover, opens QR / store on click */
.get-app-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s ease,
              background 0.18s ease;
  position: relative;
  overflow: hidden;
}
.get-app-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.get-app-pill:hover {
  transform: translateY(-2px) scale(1.03);
  background: #1a1a1a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.get-app-pill:hover::before { transform: translateX(100%); }
.get-app-pill:active { transform: translateY(0) scale(0.98); }

.gap-ico { display: inline-flex; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.get-app-pill:hover .gap-ico { transform: rotate(-12deg) scale(1.1); }

.gap-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-weight: 700;
}
.get-app-pill:hover .gap-arrow { transform: translateX(6px); }

.gap-note {
  margin: 16px auto 0;
  font-size: 12px;
  color: var(--dim);
  max-width: 360px;
}

/* QR modal */
.qr-modal { width: 360px; text-align: center; padding: 28px 28px 22px; }
.qr-modal h2 { font-size: 22px; }
.qr-frame {
  margin: 18px auto 16px;
  width: 220px;
  height: 220px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-frame img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr-or {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 8px;
}
.qr-stores { font-size: 14px; font-weight: 700; }
.qr-stores a { color: var(--ink); text-decoration: underline; }
.qr-stores a:hover { opacity: 0.7; }
.qr-dot { color: var(--dim); margin: 0 8px; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn small { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.store-btn strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

@media (max-width: 880px) {
  .dark-inner { padding: 64px 18px; }
  .dark-h { font-size: 32px; }
  .steps-grid { grid-template-columns: 1fr; gap: 36px; }
  .for-barbers { grid-template-columns: 1fr; gap: 32px; }
  .for-barbers .fb-art { order: -1; }
}

/* Booking page grid */
.booking-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
}
@media (max-width: 880px) {
  .booking-grid { grid-template-columns: 1fr; }
}

/* -------- Auth modal -------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scrim.show { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  width: 420px;
  max-width: 92%;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(8px);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}
.scrim.show .modal { transform: translateY(0); }
.modal h2 { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 4px; }
.modal .sub { font-size: 13px; color: var(--dim); margin-bottom: 18px; }
.seg {
  display: flex;
  padding: 3px;
  background: var(--tint);
  border-radius: 10px;
  margin-bottom: 18px;
}
.seg .opt {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
}
.seg .opt.active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.form-row label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.form-row input {
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: 0;
}
.form-row input:focus { border-color: var(--ink); }
.auth-cta {
  width: 100%;
  padding: 14px 0;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  margin-top: 6px;
}
.divider-row { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--dim); font-size: 11px; }
.divider-row::before, .divider-row::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.social-row { display: flex; gap: 8px; }
.btn-social {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.x-close {
  position: absolute;
  top: 14px;
  right: 18px;
  cursor: pointer;
  font-size: 20px;
  color: var(--dim);
  background: transparent;
  border: 0;
}
.guest-line {
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hair);
  font-size: 12px;
  color: var(--dim);
}
.guest-line a { color: var(--ink); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* -------- Discovery -------- */
.discovery-top {
  padding: 22px 48px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
}
.search-box {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
}
.search-box svg { width: 14px; height: 14px; color: var(--dim); }
.search-box input { border: 0; outline: 0; flex: 1; font-size: 13px; font-family: inherit; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--tint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.chip:hover:not(.active) { background: var(--tint-2); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip.active { background: var(--ink); color: #fff; }
.view-toggle { display: flex; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.view-toggle button {
  padding: 7px 12px;
  background: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}
.view-toggle button.active { background: var(--ink); color: #fff; }

.discovery-body { display: grid; grid-template-columns: 1fr; gap: 0; }
.discovery-list { padding: 16px 48px 36px; }
.empty-state {
  padding: 48px 0;
  text-align: center;
  color: var(--dim);
  font-size: 14px;
}

/* Google Maps pane. Hidden by default — view-toggle on the discovery
   page flips body[data-view="map"] which reveals it and hides the
   list. Height fixed so the map fills the visible canvas. */
.map-pane {
  display: none;
  margin: 16px 48px 36px;
  border-radius: 18px;
  overflow: hidden;
  height: 640px;
  background: #f1f3f5;
}
body[data-view="map"] .map-pane { display: block; }
body[data-view="map"] .discovery-list { display: none; }

.shop-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  margin-bottom: 12px;
}
.shop-row:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06); }
.shop-row .img {
  width: 110px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  background-size: cover;
  background-position: center;
}
.shop-row .img.has-img {
  background-color: #1a1a1a;
}
.shop-row .img.a2 { background: linear-gradient(135deg, #444 0%, #1a1a1a 100%); }
.shop-row .img.a3 { background: linear-gradient(135deg, #2a2a2a 0%, #555 100%); }
.shop-row .img.a4 { background: linear-gradient(135deg, #181818 0%, #333 100%); }
.shop-row h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.shop-row .meta { font-size: 12px; color: var(--dim); display: flex; gap: 10px; align-items: center; }
.shop-row .meta b { color: var(--ink); font-weight: 700; }
.shop-row .meta .open { color: var(--ink); font-weight: 700; }
.shop-row .book {
  padding: 8px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: 0;
}

/* -------- Shop detail -------- */
.shop-detail-hero {
  height: 280px;
  background: linear-gradient(135deg, #1a1a1a 0%, #303030 100%);
  position: relative;
  display: flex;
  align-items: end;
  padding: 24px 48px;
  color: #fff;
}
.shop-detail-hero h1 {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.shop-detail-hero .meta { display: flex; gap: 18px; font-size: 13px; opacity: 0.85; flex-wrap: wrap; }
.shop-detail-hero .meta strong { font-weight: 800; }

.back-bar {
  padding: 14px 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
}

.shop-content { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; padding: 28px 48px; }
.shop-content h2 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  text-transform: uppercase;
  color: var(--dim);
}

/* Service card — mirrors iOS ServiceCard (name / duration / desc /
   price stacked, Book / Selected capsule on the right). */
.service-list { display: flex; flex-direction: column; gap: 12px; }
.service-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.service-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); }
.service-card.selected {
  border-color: var(--ink);
  background: var(--tint);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.sc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sc-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.sc-dur { font-size: 13px; color: var(--dim); }
.sc-desc { font-size: 13px; color: var(--dim); line-height: 1.4; }
.sc-price { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sc-cta {
  flex: 0 0 auto;
  width: 96px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.service-card:hover .sc-cta { background: var(--ink); color: #fff; }
.service-card.selected .sc-cta { background: var(--ink); color: #fff; }

/* Time picker sections on the shop page */
.time-section { margin-bottom: 18px; }
.time-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}

.barber-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
}
.barber-row .av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a, #444);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.barber-row .av.has-img { background-color: #1a1a1a; }
.barber-row h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.barber-row .meta { font-size: 12px; color: var(--dim); }
.barber-row .pick {
  padding: 7px 12px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--ink);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.barber-row.selected .pick { background: var(--ink); color: #fff; }

.booking-card {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px;
  position: sticky;
  top: 90px;
}
.booking-card .row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 13px; }
.booking-card .row .lbl { color: var(--dim); }
.booking-card .row .val { font-weight: 700; }
.booking-card .row.fee-row { padding-top: 2px; padding-bottom: 8px; font-size: 12px; }
.booking-card .row.fee-row .val { font-weight: 600; color: var(--ink); }
.booking-card .total {
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 800;
}
.booking-card .book-cta {
  width: 100%;
  padding: 14px 0;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  margin-top: 14px;
}
.booking-card .guest-note {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--dim);
}
.booking-card .guest-note.hidden { display: none; }
.booking-card .guest-note a { color: var(--ink); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* -------- Time grid -------- */
.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}
.time-grid .t {
  padding: 12px 0;
  border-radius: 10px;
  background: var(--tint);
  border: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: background 0.15s ease, transform 0.12s ease;
}
.time-grid .t:hover:not(.unavail):not(.selected) {
  background: var(--tint-2);
  transform: translateY(-1px);
}
.time-grid .t.selected { background: var(--ink); color: #fff; }
.time-grid .t.unavail { opacity: 0.3; cursor: not-allowed; }

.kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 700;
  margin: 18px 0 8px;
}

/* -------- Confirmed -------- */
.confirmed { text-align: center; padding: 60px 48px; }
.confirmed .check {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 18px;
}
.confirmed h1 { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 10px; }
.confirmed p { font-size: 14px; color: var(--dim); max-width: 420px; margin: 0 auto 22px; }
.receipt {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px;
  text-align: left;
}
.receipt .row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 13px; }
.receipt .row + .row { border-top: 1px solid var(--hair); }
.receipt .row .lbl { color: var(--dim); }
.confirmed-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }

/* -------- Footer -------- */
.foot {
  background: #0b0b0c;
  color: #c8c8cc;
  margin-top: 64px;
  border-top: 1px solid #1a1a1c;
}
.foot-top {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 48px 36px;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
}
.foot-brand .logo { color: #fff; font-size: 24px; cursor: default; }
.foot-brand .logo .dot { background: #fff; }

.foot-social {
  display: flex;
  gap: 18px;
  margin-top: 20px;
}
.foot-social a {
  color: #c8c8cc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.foot-social a:hover {
  color: #fff;
  transform: translateY(-2px);
}

.foot-locale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 600;
  color: #b0b0b4;
}
.foot-locale svg { color: #fff; opacity: 0.7; }
.foot-locale .foot-locale-sep { color: #555; margin: 0 2px; }
.foot-locale .foot-locale-dot { color: #555; margin: 0 2px; }
#footLocaleCity, #footLocaleCountry { color: #fff; }
.kicker-sm {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a8e;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Get-the-app strip — lives in the footer */
.foot-download {
  border-bottom: 1px solid #1a1a1c;
}
.foot-download-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.foot-download h3 {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.foot-download-cta { text-align: right; }
.foot-download .gap-note { margin-top: 10px; color: #8a8a8e; max-width: 320px; margin-left: auto; }

/* Pill in the footer needs a tweaked palette so the white pill pops
   on the dark backdrop. */
.foot-download .get-app-pill {
  background: #fff;
  color: #0b0b0c;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.foot-download .get-app-pill:hover { background: #e8e8ec; }
.foot-download .get-app-pill::before {
  background: linear-gradient(120deg, transparent 30%, rgba(0,0,0,0.08) 50%, transparent 70%);
}

@media (max-width: 880px) {
  .foot-download-inner { grid-template-columns: 1fr; padding: 32px 18px; text-align: left; }
  .foot-download-cta { text-align: left; }
  .foot-download .gap-note { margin-left: 0; }
}

.foot-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.foot-col h4 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a8e;
  font-weight: 700;
  margin: 0 0 4px;
}
.foot-col a {
  display: inline-block;
  font-size: 14px;
  color: #e8e8ec;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.foot-col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.foot-col a:hover { color: #fff; }
.foot-col a:hover::after { transform: scaleX(1); }
.foot-col a:not(:hover)::after { transform-origin: right center; }

.foot-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 48px 36px;
  border-top: 1px solid #1a1a1c;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #8a8a8e;
}
.foot-legal { display: flex; gap: 18px; }
.foot-legal a { color: #8a8a8e; text-decoration: none; }
.foot-legal a:hover { color: #fff; }

@media (max-width: 880px) {
  .foot-top { grid-template-columns: 1fr; padding: 36px 18px 24px; gap: 28px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-bottom { padding: 18px; flex-direction: column; gap: 10px; }
}

/* -------- Tablet / mobile -------- */
@media (max-width: 880px) {
  .nav, .container, .hero, .section-head, .shop-content,
  .discovery-top, .discovery-list, .shop-detail-hero, .confirmed, .foot {
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero h1 { font-size: 40px; }
  .grid-3 { grid-template-columns: 1fr 1fr; padding-left: 18px; padding-right: 18px; }
  .shop-content { grid-template-columns: 1fr; }
  .booking-card { position: static; }
  .nav-links { display: none; }
  .content-block { grid-template-columns: 1fr; gap: 24px; padding: 48px 18px; }
  .content-block.alt .cb-art { order: 2; }
  .cb-text h2 { font-size: 30px; }
}