/* Focus indicator.
   Every interactive element on the site computed to outline:none, so someone
   navigating by keyboard, switch or screen reader had no way to see where they
   were. That is a straight WCAG 2.4.7 failure and it makes the demo form close
   to unusable without a mouse.

   :focus-visible means a mouse click still shows nothing, so the design is
   unchanged for pointer users; the ring appears only for keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0DC59A !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* On the dark navy footer and hero, green on navy is legible but a white ring
   reads faster. */
footer a:focus-visible,
header a:focus-visible {
  outline-color: #FFFFFF !important;
}

/* Older browsers without :focus-visible still deserve something. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #0DC59A !important;
    outline-offset: 2px !important;
  }
}

/* At 360px the logo (154px) plus Book a demo (134px) plus Menu (67px) plus
   spacing needs 404px, so Menu was pushed off the right edge of the screen.
   The sticky action bar already carries Book a demo on phones, so the header
   copy of it is duplication that costs the Menu button its place. Hide it and
   the header fits with room to spare. */
@media (max-width: 767px) {
  header div[style*="margin-left: auto"] > a[href="#/demo"] {
    display: none !important;
  }
}


/* The header was authored with 24px side padding and a 28px gap. At 390px
   that needs 418px of room, so the Menu button was cut off past the right
   edge of the screen. Tighten only the spacing, on small phones only. */
@media (max-width: 480px) {
  header > div[style*="max-width: 1200px"],
  header > div[style*="max-width:1200px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 10px !important;
  }
}
/* Mobile polish.
   The design build was authored at desktop width, so stacked link lists
   inherited desktop line-heights: every footer and menu link measures about
   19 pixels tall on a phone, against the 44 pixel minimum a thumb needs.
   These rules only widen the touch area; they change no colour, no font and
   no desktop layout. */

@media (max-width: 900px) {
  /* The Platform jump list. These are real navigation now that they scroll
     properly, so they need a thumb-sized target rather than a text line. */
  div[style*="font-size: 19px"][style*="font-weight: 600"] > a[href] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Breadcrumbs and the related-pages row are navigation, but were authored
     at desktop line-height: 16px and 19px tall. Both are how someone moves
     between the city and sport pages, so they need a thumb-sized target. */
  section[style*="padding: 28px 24px 0px"] a[href],
  div[style*="gap: 16px 32px"] > a[href],
  div[style*="gap: 16px 28px"] > a[href] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Links stacked in a column, which is every footer and menu list here. */
  div[style*="flex-direction:column"] > a[href],
  div[style*="flex-direction: column"] > a[href] {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  /* The columns already carry their own gap, so remove the doubling. */
  div[style*="flex-direction:column"][style*="gap:11px"],
  div[style*="flex-direction: column"][style*="gap: 11px"] {
    gap: 0 !important;
  }

  /* The legal row at the very bottom is a wrapping flex row, not a column,
     so it needs its own rule. Privacy, Terms and refunds sat at 16px. */
  div[style*="gap: 12px 24px"] > a[href],
  div[style*="gap:12px 24px"] > a[href] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The header wordmark is the way back to the homepage. */
  a[style*="flex-shrink: 0"][style*="text-decoration: none"],
  a[style*="flex-shrink:0"][style*="text-decoration:none"] {
    min-height: 44px;
  }

  /* Room for the action bar so it never sits on top of the last line. */
  /* The runtime wraps the page in its own full-height container, so padding
     on body never reaches the scroll height. The footer is in normal flow,
     so pad that instead and the last line clears the bar. */
  footer {
    padding-bottom: 0;
  }
}

/* Sticky action bar: on a phone the way to reach you should never be more
   than one thumb away, whatever the visitor is reading. */
#kx-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  display: none;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 1px;
  background: rgba(13, 27, 62, .14);
  box-shadow: 0 -8px 24px rgba(13, 27, 62, .16);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 767px) {
  #kx-actionbar { display: grid; }
  /* Clearance so the last footer line is not hidden behind the bar. */
  footer { padding-bottom: 88px !important; }
}

#kx-actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 56px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  background: #FFFFFF;
  color: #0D1B3E;
  -webkit-tap-highlight-color: transparent;
}

#kx-actionbar a.kx-primary {
  background: #0DC59A;
  color: #062B22;
}

#kx-actionbar a:active { filter: brightness(.94); }

#kx-actionbar svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Respect a visitor who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  #kx-actionbar { transition: none !important; }
}

/* Printing a page should not carry a floating bar onto paper. */
@media print {
  #kx-actionbar { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ---------------------------------------------------------------------------
   Demo form on phones.

   The fields were drawn as a bare underline: transparent background, a single
   1.5px line, square corners. On a wide screen that reads as restraint. On a
   phone it reads as unfinished, because every other form a venue owner fills
   in on that device is a proper bordered box. It also gives the thumb no
   visible target, only a line to aim beneath.

   These rules apply below 900px only. The desktop design is untouched.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* The four text fields. */
  input[name="name"],
  input[name="venue"],
  input[name="city"] {
    background: #F7F8FA !important;
    border: 1.5px solid #DDE0E5 !important;
    border-radius: 10px !important;
    padding: 13px 14px !important;
    min-height: 52px !important;
  }

  /* The mobile field is a wrapper holding "+91" and the input, so the box goes
     on the wrapper and the input inside stays bare. */
  span[style*="border-bottom: 1.5px solid"] {
    background: #F7F8FA !important;
    border: 1.5px solid #DDE0E5 !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    min-height: 52px !important;
    align-items: center !important;
  }
  span[style*="border-bottom: 1.5px solid"] > span {
    padding-bottom: 0 !important;
  }
  span[style*="border-bottom: 1.5px solid"] > input {
    padding: 13px 0 !important;
  }

  /* A field being worked on should say so. */
  input[name="name"]:focus,
  input[name="venue"]:focus,
  input[name="city"]:focus {
    background: #FFFFFF !important;
    border-color: #0DC59A !important;
  }
  span[style*="border-bottom: 1.5px solid"]:focus-within {
    background: #FFFFFF !important;
    border-color: #0DC59A !important;
  }

  /* A field the visitor has been told to fix reads red, not grey. */
  input[aria-invalid="true"] {
    border-color: #B3261E !important;
    background: #FDF5F5 !important;
  }

  /* The bookings dropdown was the one field left as a bare underline, which
     looked like an oversight sitting under four boxed fields. */
  select[style*="border-style: none none solid"],
  select[style*="border-width: 0px 0px 1.5px"] {
    background: #F7F8FA !important;
    border: 1.5px solid #DDE0E5 !important;
    border-radius: 10px !important;
    padding: 13px 14px !important;
    min-height: 52px !important;
  }
  select:focus {
    background: #FFFFFF !important;
    border-color: #0DC59A !important;
  }

  /* The sports dropdown and its panel, so the control does not sit square
     among four rounded fields. */
  button[aria-haspopup="listbox"] {
    border-radius: 10px !important;
    background: #F7F8FA !important;
  }
  button[aria-haspopup="listbox"][aria-expanded="true"] {
    background: #FFFFFF !important;
    border-color: #0DC59A !important;
  }
  div[role="group"][aria-label="Sports at your venue"] {
    border-radius: 10px !important;
  }

  /* Rounded corners on the submit button to match the fields. */
  button[type="submit"] {
    border-radius: 10px !important;
  }
}

/* ---------------------------------------------------------------------------
   The stray mobile call-to-action.

   Nav.dc.html puts a sticky "Book a demo" bar inside <header>, positioned
   fixed with bottom:0. The header carries backdrop-filter, and an ancestor
   with backdrop-filter becomes the containing block for fixed descendants. So
   bottom:0 resolved to the bottom of the 77px header, not the bottom of the
   screen: the bar rendered across the top of the page, over the header, with
   the section heading underneath it hidden. It has been doing that since
   before any of my changes.

   It is also now redundant. The action bar at the foot of the screen already
   carries Call, WhatsApp and Book a demo, and that one is positioned against
   the viewport, so it lands where it should. Hiding the trapped one removes
   the overlap and the duplicate button in a single step.
   --------------------------------------------------------------------------- */
header div[style*="z-index:50"][style*="bottom:0"],
header div[style*="z-index: 50"][style*="bottom: 0"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Images squashed into tall slivers.

   My own regression. To stop the page jumping as images load I added width and
   height attributes to every image. An HTML height attribute becomes a CSS
   height declaration, and an explicit height beats a CSS aspect-ratio, because
   the ratio only applies when one dimension is auto.

   Thirteen images across five pages already declared "aspect-ratio: 16 / 9" in
   their own styles. Those ratios were being ignored, so on a phone a 1600x1200
   venue photo rendered 340 wide and 1200 tall: a vertical strip showing about a
   quarter of the picture. On a wide screen it looked fine, which is why every
   automated check passed.

   Letting height resolve automatically hands control back to the declared
   ratio. The attributes stay, so the space is still reserved and the page still
   does not jump.
   --------------------------------------------------------------------------- */
img[style*="aspect-ratio"] {
  height: auto !important;
}

/* ---------------------------------------------------------------------------
   The demo card running off the right edge of the screen.

   The card sits in a one-column CSS grid. A 1fr track will not shrink below
   the min-content width of what is inside it unless the item is explicitly
   allowed to, and here that floor was 358px. On a 390px phone the card ended
   8px from the right edge instead of 24, which merely looked off-centre. On a
   360px phone, which is the common Android width, the card ran 22px past the
   edge of the screen, taking the Menu button with it.

   That is why it looked broken on a real phone while every check at 390px
   reported no overflow.

   min-width:0 lets the track shrink to the space actually available. Verified
   that nothing inside then spills out of the card.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  div[style*="max-width: 1200px"][style*="grid-template-columns"] > *,
  div[style*="max-width:1200px"][style*="grid-template-columns"] > * {
    min-width: 0;
  }

  /* The same floor exists at every level down to the input, so the permission
     to shrink has to travel with it: the field grid, each label, and the flex
     row inside the mobile label. Without this the card shrinks correctly and
     the fields simply hang out of its right side instead. */
  form div[style*="display: grid"] > *,
  form label,
  form label > span {
    min-width: 0 !important;
  }

  /* Same reason, one level down: the mobile field is a flex row holding "+91"
     and the input, and the input must be allowed to give up width. */
  span[style*="border-bottom: 1.5px solid"] > input {
    min-width: 0 !important;
    flex: 1 1 0% !important;
  }
}

/* On the demo page itself, "Book a demo" points at the page you are already
   reading. Drop it there and let Call and WhatsApp share the width, so the
   bar always offers something you cannot already see. */
#kx-actionbar.kx-on-demo { grid-template-columns: 1fr 1fr; }
#kx-actionbar.kx-on-demo a.kx-primary { display: none; }

/* At 320px the mobile field is 155px wide and the +91 prefix takes a slice of
   it, so "Enter mobile number" was cut off mid-word. Tighten the prefix and
   the type just for the narrowest phones; 16px still stops iOS zooming in. */
@media (max-width: 360px) {
  input[name="phone"] { font-size: 16px !important; letter-spacing: 0 !important; }
  span:has(> input[name="phone"]) { gap: 6px !important; }
  span:has(> input[name="phone"]) > span:first-child { font-size: 16px !important; }
}

/* ==========================================================================
   Product screenshots, set in a window.

   A raw capture with a one pixel grey border reads as a placeholder. The same
   capture inside a browser window, lifted off the page, reads as a product.
   The window is drawn here in CSS so it costs nothing to download, and the
   screen takes its shape from the picture (shots.js sets --kx-ar) so nothing
   is ever cropped and there are no grey bars either.
   ========================================================================== */

.kx-shot {
  position: relative;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(13, 27, 62, .10);
  box-shadow:
    0 1px 2px rgba(13, 27, 62, .05),
    0 10px 24px -10px rgba(13, 27, 62, .16),
    0 36px 70px -30px rgba(13, 27, 62, .30);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

/* A soft pool of brand colour under the window, so it is not sitting flat
   on a white page. */
.kx-shot::before {
  content: "";
  position: absolute;
  inset: auto 6% -18px 6%;
  height: 42px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 197, 154, .30), rgba(13, 197, 154, 0));
  opacity: 0;
  transition: opacity 900ms ease 180ms;
  pointer-events: none;
}
.kx-shot.is-in::before { opacity: 1; }

/* The title bar. */
.kx-shot-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 13px;
  background: linear-gradient(180deg, #FBFCFD 0%, #F1F3F7 100%);
  border-bottom: 1px solid rgba(13, 27, 62, .09);
}
.kx-shot-dots { display: flex; gap: 6px; flex: none; }
.kx-shot-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D3D7E0;
  box-shadow: inset 0 0 0 1px rgba(13, 27, 62, .06);
}
.kx-shot-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 260px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(13, 27, 62, .05);
  font: 500 11.5px/1.5 Inter, system-ui, -apple-system, sans-serif;
  color: #5A6275;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kx-shot-url svg { width: 10px; height: 10px; flex: none; color: #0DC59A; }

/* The glass. Its shape comes from the picture inside it. */
.kx-shot-screen {
  position: relative;
  width: 100%;
  aspect-ratio: var(--kx-ar, 16 / 10);
  background: #FFFFFF;
  overflow: hidden;
}
.kx-shot-screen > .kx-shot-img,
.kx-shot-screen > img.kx-shot-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  border: 0 !important;
  background: #FFFFFF;
}

/* The stacked homepage screenshots keep cross-fading inside the window. */
.kx-shot-stacked .kx-shot-screen > .kx-shot-img { position: absolute; inset: 0; }

/* ---- Arrival ---------------------------------------------------------- */

.kx-shot {
  opacity: 0;
  transform: translateY(20px) scale(.984);
  transition:
    opacity 760ms cubic-bezier(.22, .61, .36, 1),
    transform 760ms cubic-bezier(.22, .61, .36, 1),
    box-shadow 420ms ease;
  will-change: opacity, transform;
}
.kx-shot.is-in { opacity: 1; transform: none; will-change: auto; }

/* One sweep of light across the glass as it settles, the way a screen
   catches the light when you turn it towards you. */
.kx-shot-screen::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -35%;
  width: 28%;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-40%) rotate(14deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .58) 50%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
}
.kx-shot.is-in .kx-shot-screen::after { animation: kx-sheen 1150ms cubic-bezier(.3, .5, .2, 1) 420ms 1; }

@keyframes kx-sheen {
  0%   { opacity: 0;  transform: translateX(-40%) rotate(14deg); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0;  transform: translateX(560%) rotate(14deg); }
}

/* Inside the stack, the screenshot coming forward lifts slightly as it
   fades in, so the change reads as a movement rather than a flicker. */
.kx-shot-stacked .kx-shot-img {
  transform: translateY(9px) scale(.995);
  transition: opacity 300ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.kx-shot-stacked .kx-shot-img.is-live { transform: none; }

/* A mouse gets a little depth back on hover. Touch does not. */
@media (hover: hover) and (pointer: fine) {
  .kx-shot.is-in {
    transition:
      opacity 760ms cubic-bezier(.22, .61, .36, 1),
      transform 380ms cubic-bezier(.22, .61, .36, 1),
      box-shadow 380ms ease;
  }
  .kx-shot.is-in:hover {
    transform: translateY(-5px);
    box-shadow:
      0 1px 2px rgba(13, 27, 62, .05),
      0 18px 36px -12px rgba(13, 27, 62, .20),
      0 52px 92px -34px rgba(13, 27, 62, .34);
  }
}

/* The window is a frame, not a control. Keep the chrome out of the way on a
   phone, where every pixel of the screenshot counts. */
@media (max-width: 560px) {
  .kx-shot { border-radius: 11px; }
  .kx-shot-bar { height: 29px; padding: 0 10px; gap: 9px; }
  .kx-shot-dots i { width: 7px; height: 7px; }
  .kx-shot-url { font-size: 10.5px; padding: 2px 9px; max-width: 62%; }
}

/* On a phone the screenshot is drawn about a quarter of its real size, so the
   slot times and rupee figures inside it are not readable in place. Tapping
   opens it full screen; say so, rather than leaving people to guess. */
@media (hover: none) and (pointer: coarse) {
  .kx-shot-screen::before {
    content: "Tap to enlarge";
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(13, 27, 62, .72);
    color: #FFFFFF;
    font: 600 10.5px/1.4 Inter, system-ui, -apple-system, sans-serif;
    letter-spacing: .04em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease 900ms;
  }
  .kx-shot.is-in .kx-shot-screen::before { opacity: 1; }
}

/* Someone who has asked for less movement gets the window, not the motion. */
@media (prefers-reduced-motion: reduce) {
  .kx-shot {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .kx-shot.is-in .kx-shot-screen::after { animation: none; }
  .kx-shot-stacked .kx-shot-img { transform: none; transition: opacity 300ms ease; }
}