/* Landing page. Colours and type follow the export: Poppins, ink #0B1033,
   Liquid blue #0019AA, page #E7EAF2. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #E7EAF2;
  color: #0B1033;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, sans-serif;
}

.top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 32px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #5B6285; }
h1 { margin: 6px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.lede { flex: 1 0 100%; margin: 0; font-size: 14px; line-height: 1.55; color: #3D4466; text-wrap: pretty; }
.tip { display: none; }

.switcher { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: #fff; }
.switcher a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 16px;
  border-radius: 12px;
  color: #0B1033;
  text-decoration: none;
}
.switcher a:hover { background: #F5F7FB; }
.switcher a:focus-visible { outline: 2px solid #0019AA; outline-offset: 2px; }
.switcher .name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.switcher .desc { font-size: 11.5px; color: #5B6285; white-space: nowrap; }
.switcher a[aria-current] { background: #0B1033; color: #fff; }
.switcher a[aria-current] .desc { color: rgba(255, 255, 255, .7); }

.stage iframe { display: block; width: 100%; height: 720px; border: 0; }

.noscript { margin: 24px 32px; font-size: 14px; }

/* Phones: no frame here. Each version opens as its own full-screen page. */
@media (max-width: 760px), (max-height: 600px) {
  .top { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 28px 20px 32px; }
  h1 { font-size: 26px; }
  .lede { order: 1; flex: none; margin-top: 10px; font-size: 15px; }
  .switcher { order: 2; }
  .tip { order: 3; }
  .switcher { flex-direction: column; gap: 10px; margin-top: 24px; padding: 0; background: none; }
  .switcher a,
  .switcher a[aria-current] {
    position: relative;
    padding: 16px 44px 16px 18px;
    border-radius: 18px;
    background: #fff;
    color: #0B1033;
  }
  .switcher a::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #0019AA;
  }
  .switcher .name { font-size: 16px; }
  .switcher .desc,
  .switcher a[aria-current] .desc { font-size: 13px; color: #5B6285; white-space: normal; }
  .tip { display: block; margin: 20px 2px 0; font-size: 13px; line-height: 1.5; color: #5B6285; }
  .stage { display: none; }
}