/* Uko Sorted page. Blue core of the Paystack palette: Midnight, Deep Sky, Stack and White. */
b { font-weight: 900; }
.btn-dark { background: var(--midnight); color: var(--white); }
.btn-dark:hover { background: var(--stack); }
.btn-light { background: var(--white); color: var(--midnight); }
.btn-light:hover { background: var(--midnight); color: var(--white); }
.muted-dark { color: rgba(14, 20, 27, 0.72); }

/* Preloader: the four bars of the mark build, then the answer lands */
.pre-inner { display: grid; justify-items: center; gap: 28px; }
.pre-mark { display: grid; gap: 7px; width: 92px; }
.pre-mark span { height: 19px; border-radius: 4px; background: var(--sky); transform-origin: 0 50%; transform: scaleX(0); }
.pre-mark span:nth-child(1) { width: 93%; }
.pre-mark span:nth-child(3) { width: 93%; }
.pre-mark span:nth-child(4) { width: 59%; }
.pre-line { font-family: var(--font-head); font-weight: 800; font-size: 26px; }
.pre-q { color: var(--ink-soft); }
.pre-a { color: var(--sky); opacity: 0; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-top: 96px; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding-top: 24px; padding-bottom: 24px; }
.hero-title { display: grid; gap: 10px; max-width: 46%; }
.hero-q { font-size: clamp(28px, 3vw, 46px); line-height: 1.08; color: var(--white); }
.hero-a { font-size: clamp(64px, 10vw, 168px); line-height: 0.95; color: var(--sky); }
.hero-proof { margin-top: 26px; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); max-width: 26em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-stage canvas { width: 100%; height: 100%; }
.stage-fallback { display: none; }
.no-webgl .stage-fallback { display: grid; place-items: center; position: absolute; inset: 0; color: var(--sky); }
.no-webgl .stage-fallback svg { width: 40%; height: auto; }
.hero-methods { position: relative; z-index: 2; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 15px; }

/* The desk */
.desk { padding: clamp(88px, 11vw, 150px) 0; }
.desk-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.desk-copy h2 { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; }
.desk-copy .lede { font-size: 18px; margin-top: 22px; color: rgba(14, 20, 27, 0.78); }
.desk-copy .lede + .lede { margin-top: 16px; }
.desk-pile { position: relative; min-height: 420px; overflow-x: clip; }
.pile { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pile li {
  background: var(--white); color: var(--midnight); border-left: 6px solid var(--midnight);
  padding: 20px 22px; font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.8vw, 24px);
  box-shadow: 0 1px 0 rgba(14, 20, 27, 0.08);
}
.pile li:nth-child(2) { border-color: var(--orange); margin-left: 6%; }
.pile li:nth-child(3) { border-color: var(--fuchsia); margin-left: 2%; }
.pile li:nth-child(4) { border-color: var(--gold); margin-left: 9%; }
.pile li:nth-child(5) { border-color: var(--lime); margin-left: 4%; }
.pile-one {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  background: var(--midnight); color: var(--white); padding: 28px; display: flex; gap: 20px; align-items: center;
  border-bottom: 10px solid var(--sky); opacity: 0; visibility: hidden;
}
.pile-mark { color: var(--sky); flex: 0 0 56px; }
.pile-mark svg { width: 56px; height: auto; }
.pile-one p { font-size: 19px; line-height: 1.4; }

/* The word */
.word-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.word-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 10px solid var(--sky); }
.word-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.word-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-soft); }
.word-big { font-family: var(--font-head); font-weight: 900; font-size: clamp(80px, 13vw, 200px); line-height: 1; color: var(--sky); margin: 18px 0 22px; }

/* Call and response */
.calls { position: relative; height: 100svh; overflow: hidden; background: var(--midnight); }
.calls-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s; }
.calls-bg img.is-on { opacity: 0.55; }
.calls::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 27, 0.9) 0%, rgba(14, 20, 27, 0.55) 70%, rgba(14, 20, 27, 0.35) 100%); }
.calls-inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-content: center; padding-top: 110px; padding-bottom: 64px; }
.calls-list { list-style: none; margin: 0; padding: 0; position: relative; align-self: end; min-height: 3.4em; font-size: clamp(38px, 6vw, 96px); }
.call { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(30px); transition: opacity 0.5s, transform 0.6s var(--ease-out); }
.call.is-on { opacity: 1; transform: none; }
.call-q { font-family: var(--font-head); font-weight: 800; line-height: 1.02; max-width: 13em; }
.call-proof { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin-top: 18px; max-width: 34em; font-family: var(--font-body); }
.calls-answer { font-family: var(--font-head); font-weight: 900; font-size: clamp(64px, 10vw, 168px); line-height: 1; color: var(--sky); margin-top: 26px; }
.calls-dots { display: flex; gap: 8px; margin-top: 30px; }
.calls-dots span { width: 34px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); transition: background 0.3s; }
.calls-dots span.is-on { background: var(--sky); }

/* The facts as a stack */
.bars { display: grid; gap: 10px; margin-top: 56px; }
.bar { display: grid; grid-template-columns: minmax(170px, 0.34fr) 1fr; align-items: center; gap: 24px; padding: 22px 28px; border-radius: 6px; transform-origin: 0 50%; }
.bar:nth-child(1) { width: 93%; }
.bar:nth-child(2) { width: 100%; }
.bar:nth-child(3) { width: 93%; }
.bar:nth-child(4) { width: 86%; }
.bar:nth-child(5) { width: 79%; }
.bar:nth-child(6) { width: 59%; }
.bar-n { font-family: var(--font-head); font-weight: 900; font-size: clamp(34px, 4vw, 60px); line-height: 1; }
.bar-t { font-size: 16px; line-height: 1.45; }
.bar-sky { background: var(--sky); color: var(--midnight); }
.bar-midnight { background: var(--midnight); color: var(--white); }
.bar-stack { background: var(--stack); color: var(--white); }
.bar-deep { background: var(--sky-900); color: var(--white); }
.bar-gold { background: var(--gold); color: var(--midnight); }
.bar-ivory { background: var(--ivory); color: var(--midnight); }
.proof-src { margin-top: 28px; color: rgba(14, 20, 27, 0.6); }

/* Tracks */
.track { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: 48px 0; border-top: 1px solid rgba(14, 20, 27, 0.14); }
.tracks h2 { margin-bottom: 48px; max-width: 14em; }
.track-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.track-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track-copy h3 { font-size: 20px; font-family: var(--font-body); font-weight: 700; color: var(--stack); }
.track-line { font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; margin: 12px 0 16px; }
.track-line span { color: var(--stack); }
.track-copy .btn { margin-top: 24px; }
.receipt-frame { background: var(--midnight); display: grid; place-items: end; padding: 16px; }
.receipt-frame::after { content: ""; position: absolute; inset: 0; background: rgba(14, 20, 27, 0.35); }
.receipt { position: relative; z-index: 1; }
.receipt { width: 58%; background: #E7FFDB; color: var(--midnight); border-radius: 8px 8px 8px 0; padding: 18px 20px 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.receipt-who { font-weight: 700; font-size: 14px; color: var(--stack); }
.receipt-msg { font-size: 17px; line-height: 1.45; margin-top: 6px; }
.receipt-time { text-align: right; font-size: 12px; color: rgba(14, 20, 27, 0.55); margin-top: 6px; }

/* Developers */
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.qa { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; font-size: clamp(19px, 1.7vw, 23px); }
.qa span { color: var(--sky); font-weight: 700; }
.code { margin: 0; background: var(--sky-1000); border: 1px solid var(--line); border-radius: 6px; padding: 24px; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.7; color: #CFE9FF; }
.code .c { color: var(--ink-faint); }
.weekend { margin-top: 20px; padding: 26px; background: var(--stack); border-radius: 6px; }
.weekend h3 { font-size: 24px; margin-bottom: 10px; }

/* Places marquee */
.places { background: var(--sky); color: var(--midnight); padding: 26px 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 4vw, 60px); }
.places span { padding-right: 1.1em; }
.places em { font-style: normal; color: var(--white); }

/* Promise */
.promise-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); }
.promise-list { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 0; }
.promise-list li { counter-increment: p; padding: 22px 0 22px 64px; border-top: 1px solid rgba(14, 20, 27, 0.14); position: relative; font-size: 18px; color: rgba(14, 20, 27, 0.78); }
.promise-list li::before { content: counter(p); position: absolute; left: 0; top: 18px; font-family: var(--font-head); font-weight: 900; font-size: 30px; color: var(--stack); }
.promise-list strong { color: var(--midnight); }

/* Final */
.final { position: relative; overflow: hidden; padding: clamp(110px, 16vw, 220px) 0; }
.final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final::after { content: ""; position: absolute; inset: 0; background: rgba(14, 20, 27, 0.35); }
.final-inner { position: relative; z-index: 2; }
.final h2 { max-width: 10em; }
.final-sign { margin-top: 40px; font-family: var(--font-head); font-weight: 700; font-size: 20px; }

@media (max-width: 960px) {
  .hero-title { max-width: none; }
  .hero-stage { position: relative; top: auto; bottom: auto; width: 100%; height: 300px; order: -1; }
  .hero { grid-template-rows: auto auto auto; padding-top: 72px; }
  .desk-grid, .word-grid, .build-grid, .promise-grid, .track { grid-template-columns: 1fr; }
  .desk-pile { min-height: 380px; }
  .bar { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
  .word-photo { aspect-ratio: 4 / 3; }
}

/* Grid children must be allowed to shrink below their content, or the code block widens the page */
.desk-grid > *, .word-grid > *, .build-grid > *, .promise-grid > *, .track > *, .check-grid > * { min-width: 0; }
@media (max-width: 960px) {
  .bar:nth-child(n) { width: 100%; }
  .bar:nth-child(1), .bar:nth-child(3) { width: 96%; }
  .bar:nth-child(5) { width: 92%; }
  .bar:nth-child(6) { width: 84%; }
}

/* Sorted Trial panel and the rooms list */
.trial-frame { background: var(--stack); color: var(--white); display: grid; align-content: end; padding: 28px; }
.trial-n { font-family: var(--font-head); font-weight: 900; font-size: clamp(48px, 6vw, 88px); line-height: 1; }
.trial-t { font-size: 20px; margin-top: 6px; }
.rooms-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); }
.rooms-grid > * { min-width: 0; }
.rooms-lede { margin-top: 20px; font-size: 18px; }
.rooms-list { list-style: none; margin: 0; padding: 0; }
.rooms-list li { display: grid; grid-template-columns: 200px 1fr; gap: 4px 24px; padding: 20px 0; border-top: 1px solid rgba(14, 20, 27, 0.14); }
.rooms-list time { grid-row: span 2; font-weight: 600; color: var(--stack); font-size: 15px; }
.rooms-list strong { font-family: var(--font-head); font-weight: 800; font-size: 22px; }
.rooms-list span { color: rgba(14, 20, 27, 0.7); font-size: 16px; }
@media (max-width: 960px) {
  .rooms-grid { grid-template-columns: 1fr; }
  .rooms-list li { grid-template-columns: 1fr; }
  .rooms-list time { grid-row: auto; }
}
.build-lede { margin-top: 20px; }