/* Client category gate.

   Shown over the landing page before anything else is readable. What it asks
   and who it admits is set per market in gate.js; this file only describes how
   it looks, so a new market needs no CSS.

   Built from the landing page's own parts: the same primary button, radius and
   type, rather than a set of its own. */

.gate {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  overflow-y: auto;
  padding: clamp(24px, 5vh, 56px) var(--pad-x);
}
.gate[hidden] { display: none; }
/* the page underneath does not scroll while the gate is up, and is not read
   out to a screen reader either; gate.js marks it inert */
.gate-open { overflow: hidden; }

/* Nothing is painted until gate.js has decided whether to ask. gate.js is
   deferred and cannot run until the document has parsed, which is long enough
   for the landing page to be seen before the disclosure. Set by an inline
   script in the page head, which also carries the failsafe that clears it if
   gate.js never arrives.

   The gate is exempt so it can show while the page behind stays hidden. Both
   are laid out as normal, so nothing moves when it is uncovered. */
.gate-pending body { visibility: hidden; }
.gate-pending .gate { visibility: visible; }
/* the preloader is what shows during that hold, so it is exempt too;
   otherwise the page head would hide the thing covering the page */
.gate-pending .preloader { visibility: visible; }

.gate__inner { max-width: 800px; margin: 0 auto; }
/* The question is a sheet on the black: the refused screen has a shape of its
   own further down, so the sheet is only drawn where the question is asked. */
.gate:not(.gate--refused) .gate__inner {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px);
}
.gate__brand { display: block; height: 46px; width: auto; margin: 0 0 clamp(20px, 4vh, 36px); }
.gate__title { color: var(--ink); font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0 0 20px; }

/* The disclosure. A fixed height with its own scrollbar: the point of the panel
   is that the reader passes through the wording, so it must not simply run down
   the page as ordinary copy. */
.gate__scroll {
  height: clamp(220px, 34vh, 290px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; margin: 0 0 22px;
  background: var(--bg);
  /* the same thin bar as the market pop-up and the use case cards */
  scrollbar-width: thin;
  scrollbar-color: #C6CBD0 transparent;
}
.gate__scroll::-webkit-scrollbar { width: 10px; }
.gate__scroll::-webkit-scrollbar-track { background: transparent; }
.gate__scroll::-webkit-scrollbar-thumb {
  background: #C6CBD0;
  border: 3px solid transparent; background-clip: padding-box;
  border-radius: 999px;
}
.gate__scroll::-webkit-scrollbar-thumb:hover {
  background: #AEB5BC; background-clip: padding-box;
}
.gate__scroll::-webkit-scrollbar-button { display: none; }
.gate__scroll h3 { color: var(--ink); font-size: 14px; font-weight: 700; margin: 0 0 16px; }
.gate__scroll p { color: var(--ink-body); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.gate__scroll p:last-child { margin-bottom: 0; }
.gate__scroll ul { color: var(--ink-body); font-size: 14px; line-height: 1.6; margin: -6px 0 16px; padding-left: 20px; }
.gate__scroll li { margin: 0 0 6px; }
/* lead-ins and the role labels: the same weight and colour as the panel's own
   heading, so a bold line reads as the start of a section */
.gate__scroll strong { color: var(--ink); font-weight: 700; }
/* named document inside the wording: marked by an underline only, no colour */
.gate__scroll a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.gate__hint { color: var(--ink); font-size: 16px; line-height: 1.5; margin: 0; }

/* Singapore keeps its legal wording out of the panel and links to it here. It
   opens market.js's pop-up, the same document the footer of that market uses. */
.gate__legal { margin: 4px 0 0; }
.gate__legal a { color: var(--ink); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }

/* One row per category: the button that answers, and the description of who it
   covers. The row is a card so the pair reads as one choice. */
.gate__options { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; }
.gate__option {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px;
}
.gate__btn {
  flex: 0 0 auto; min-width: 252px;
  background: var(--btn-primary); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.3;
  border: 0; border-radius: 8px; padding: 14px 20px; cursor: pointer;
  transition: background .15s var(--ease);
}
.gate__btn:hover { background: var(--btn-primary-hover); }
.gate__desc { color: var(--ink-body); font-size: 15px; line-height: 1.5; margin: 0; }

/* Where a market lists its categories without describing them, there is nothing
   for a card to hold: the buttons share the row instead, in equal parts. */
.gate__options--inline { flex-direction: row; flex-wrap: wrap; gap: 14px; }
/* equal parts, but never narrower than the label they carry */
.gate__options--inline .gate__option { flex: 1 1 0; min-width: max-content; border: 0; padding: 0; }
.gate__options--inline .gate__btn { width: 100%; min-width: 0; padding: 16px 20px; }

/* Where the market asks for it, each button takes the width of its own label
   instead, and the row wraps rather than squeezing them when there is no
   space. */
.gate__options--fit .gate__option { flex: 0 1 auto; }
.gate__options--fit .gate__btn { width: auto; padding: 14px 22px; }

@media (max-width: 640px) {
  .gate__option { flex-direction: column; align-items: stretch; gap: 14px; }
  .gate__btn { min-width: 0; width: 100%; }
  .gate__options--inline { flex-direction: column; }
}

/* ---- refused ---------------------------------------------------------------
   Shown in place of the gate when the category chosen is not one this market
   admits. The page behind is never revealed, so this is a full screen of its
   own and not a message over the site. */

.gate--refused { background: var(--lp-navy, #0A2E45); }
.gate--refused .gate__inner { max-width: var(--measure-wide); }
.gate__refused-brand { display: block; height: 40px; width: auto; margin: 0 0 clamp(40px, 12vh, 110px); }

/* the card takes the icon column as part of its own shape, so the two read as
   one object rather than a badge sitting beside a box */
.gate__notice {
  display: flex; align-items: stretch;
  max-width: 560px; margin: 0 auto;
  background: var(--bg); border-radius: var(--radius);
  overflow: hidden;
}
.gate__notice-icon {
  flex: 0 0 auto; width: 56px; background: var(--blue-dark);
  display: grid; place-items: center;
}
.gate__notice-icon span {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg);
  color: var(--blue-dark); font-size: 15px; font-weight: 700; display: grid; place-items: center;
}
.gate__notice-body { padding: 22px 26px; }
.gate__notice-body p { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0 0 12px; }
.gate__notice-body a { color: var(--blue-link); font-size: 14px; }

@media (max-width: 560px) {
  .gate__notice { max-width: none; }
  .gate__notice-icon { width: 44px; }
}