/* ==========================================================================
   Magengrim — "What We Build" showcase
   Copy and three tabs on the left; on the right a laptop whose screen is a
   working demo of whichever tab is selected. The laptop is a PNG with its
   screen cut out, so the demo is ordinary HTML sitting underneath the image,
   showing through the hole. The demo sizes itself from the screen's own width
   with container-query units, so it stays legible whether the laptop is
   700px wide on a desktop or 340px on a phone.
   Scoped under .mg-show / .mg-app because the theme styles form controls,
   `a`, `ul` and `button` globally.
   ========================================================================== */

.mg-show {
  --show-gap: clamp(28px, 4vw, 64px);
  /* the section runs on the site's near-black; the copy inverts to match */
  --show-ink: #ffffff;
  --show-muted: rgba(255, 255, 255, 0.62);
  --show-faint: rgba(255, 255, 255, 0.42);
  --show-line: rgba(255, 255, 255, 0.1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 7vw, 96px);
  background: #09080f;
  color: var(--show-ink);
}

.mg-show .mg-show__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr);
  gap: var(--show-gap);
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Copy column -------------------------------------------------------- */

.mg-show .mg-show__title {
  display: flex;
  align-items: center;
  gap: 0.32em;
  margin: 0 0 14px;
  font-family: var(--mg-display);
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--show-ink);
}

.mg-show .mg-show__mark {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  stroke-width: 2.2;
  transform: rotate(-45deg);
}

.mg-show .mg-show__note {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  max-width: 40ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--show-faint);
}

/* The list follows the FAQ: one rounded row per item, numbered, with a plus
   on the right that turns to a minus when the row is open — set dark here. */
.mg-show .mg-show__tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-show .mg-show__item {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 240ms var(--mg-ease), background-color 240ms var(--mg-ease);
}

.mg-show .mg-show__item:hover {
  border-color: rgba(154, 124, 245, 0.4);
}

.mg-show .mg-show__item:has(.mg-show__tab[aria-selected="true"]) {
  border-color: rgba(154, 124, 245, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

/* The theme's global `button` reset is overridden explicitly. */
.mg-show .mg-show__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px 18px 22px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--show-ink);
  transition: color 220ms var(--mg-ease);
}

/* the theme paints every focused button in its primary colour; a click
   leaves the tab focused, so :focus and :active are covered as well */
.mg-show .mg-show__tab:hover,
.mg-show .mg-show__tab:focus,
.mg-show .mg-show__tab:active,
.mg-show .mg-show__tab:focus-visible {
  background: transparent;
  color: var(--show-ink);
  outline: none;
}

.mg-show .mg-show__tab:focus-visible {
  outline: 2px solid var(--mg-purple);
  outline-offset: 3px;
}

.mg-show .mg-show__num {
  flex: none;
  font-family: var(--mg-display);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #9a7cf5;
}

.mg-show .mg-show__tabtitle {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;     /* the theme sets buttons to nowrap; a long title must
                              wrap under the plus, not run beneath it */
  overflow-wrap: anywhere;
  font-family: var(--mg-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

/* the plus: two bars, one of which turns away when open */
.mg-show .mg-show__tab::before,
.mg-show .mg-show__tab::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--show-ink);
  transform: translateY(-50%);
  transition: transform 260ms var(--mg-ease), background-color 260ms var(--mg-ease);
}

.mg-show .mg-show__tab { position: relative; padding-right: 54px; }
.mg-show .mg-show__tab::after { transform: translateY(-50%) rotate(90deg); }

.mg-show .mg-show__tab[aria-selected="true"]::after { transform: translateY(-50%) rotate(0deg); }
.mg-show .mg-show__tab[aria-selected="true"]::before,
.mg-show .mg-show__tab[aria-selected="true"]::after { background: #9a7cf5; }

.mg-show .mg-show__body {
  padding: 0 22px 22px 22px;
}

.mg-show .mg-show__text {
  margin: 0 0 16px;
  max-width: 44ch;
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--show-muted);
}

.mg-show .mg-show__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mg-show .mg-show__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--show-ink);
  text-decoration: none;
  transition: background-color 260ms var(--mg-ease), color 260ms var(--mg-ease);
}

.mg-show .mg-show__go:hover,
.mg-show .mg-show__go:focus-visible {
  background: var(--mg-purple);
  color: #ffffff;
}

.mg-show .mg-show__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--show-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
  transition: color 260ms var(--mg-ease), border-color 260ms var(--mg-ease);
}

.mg-show .mg-show__live:hover,
.mg-show .mg-show__live:focus-visible {
  color: #9a7cf5;
  border-bottom-color: #9a7cf5;
}

/* --- Device ------------------------------------------------------------- */

.mg-show .mg-show__stage {
  min-width: 0;
}

/* Aspect ratio of the PNG; the screen is placed from measured pixel bounds
   of its transparent cut-out (x 121–1298, y 75–725 of 1421×1107). */
.mg-show .mg-show__device {
  position: relative;
  width: 100%;
  aspect-ratio: 1421 / 1107;
}

.mg-show .mg-show__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* clicks fall through the bezel to the screen */
  user-select: none;
}

.mg-show .mg-show__screen {
  position: absolute;
  left: 8.515%;
  top: 6.775%;
  width: 82.899%;
  height: 58.808%;
  z-index: 1;
  overflow: hidden;
  border-radius: 0.5cqw;
  background: #0b0a12;
  container-type: size;
  container-name: screen;
}

/* ==========================================================================
   The app that runs on the screen.
   1cqw here is 1% of the screen's width. Type is clamped with a px floor so it
   never becomes unreadable on a phone-sized laptop.
   ========================================================================== */

.mg-app {
  --app-accent: #673de6;
  --app-bg: #0b0a12;
  --app-panel: #14121f;
  --app-panel-2: #1b1828;
  --app-line: rgba(255, 255, 255, 0.08);
  --app-ink: #f4f2ff;
  --app-muted: rgba(255, 255, 255, 0.55);
  --app-faint: rgba(255, 255, 255, 0.34);
  --app-up: #2ecc71;
  --app-down: #ff5c7a;
  --fs: clamp(9px, 1.75cqw, 15px);

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--mg-body);
  font-size: var(--fs);
  line-height: 1.4;
  color: var(--app-ink);
  background: var(--app-bg);
}

.mg-app[hidden] {
  display: none;
}

.mg-app.is-entering {
  animation: mgAppIn 380ms var(--mg-ease) both;
}

@keyframes mgAppIn {
  from { opacity: 0; transform: translateY(1.2cqw); }
  to   { opacity: 1; transform: none; }
}

/* generic reset for controls inside the app: the theme's global button and
   input rules must not leak in */
.mg-app button,
.mg-app input {
  font: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: auto;
  cursor: pointer;
}

.mg-app button:hover,
.mg-app button:focus {
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.mg-app button:focus-visible,
.mg-app input:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

/* ============================== Recordings ================================ */

/* The Investment Platforms tab plays a recording of the live Pine site; the
   Wallets & Payments tab plays the KwathuPay card film. Both are 16:9 against
   the screen's 1.81:1, so covering the screen trims under 2% at the sides. */
.mg-app--shot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0a12;
  isolation: isolate;
}

.mg-app .mg-app__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;    /* the theme caps video at 100%, which would leave a
                         strip of the screen uncovered */
  max-height: none;
  object-fit: cover;  /* the recording is 16:9, the screen 1.81:1: covering
                         crops under 2% at the sides and nothing shows through */
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================== 3. Business OS rail ======================= */

/* A black screen with a row of black cards drifting left on their own, the
   way the reference clip runs: title and line at the top of each card, the
   mark large beneath. The drift pauses under the pointer; the arrows, wheel,
   drag and keyboard still move it by hand. Everything on a card is white. */
.mg-app--rail {
  --app-bg: #000000;
  --app-ink: #ffffff;
  --app-line: rgba(255, 255, 255, 0.22);
  background: var(--app-bg);
}

.mg-app .mg-app__railhead {
  display: flex;
  justify-content: flex-end;
  padding: 2cqw 2.6cqw 0;
}

.mg-app .mg-app__railnav {
  display: flex;
  gap: 0.8cqw;
}

.mg-app .mg-app__railbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 50%;
  border: 1px solid var(--app-line);
  color: var(--app-ink);
  transition: background-color 200ms var(--mg-ease), color 200ms var(--mg-ease), opacity 200ms var(--mg-ease);
}

.mg-app .mg-app__railbtn svg { width: 1.7cqw; height: 1.7cqw; }

.mg-app .mg-app__railbtn:hover,
.mg-app .mg-app__railbtn:focus-visible {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: #ffffff;
}

/* the rail: no snapping, since it is moving on its own most of the time */
.mg-app .mg-app__rail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.6cqw 2.6cqw 2.4cqw;
  scrollbar-width: none;
  cursor: grab;
  outline: none;
  /* the ends fade into the black, so cards slide in from nothing */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.mg-app .mg-app__rail::-webkit-scrollbar { display: none; }
.mg-app .mg-app__rail.is-dragging { cursor: grabbing; }
.mg-app .mg-app__rail:focus-visible .mg-app__rtrack { outline: 2px solid var(--app-accent); outline-offset: 4px; border-radius: 1cqw; }

.mg-app .mg-app__rtrack {
  display: flex;
  gap: 1.2cqw;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the card */
.mg-app .mg-app__rcard {
  position: relative;
  flex: 0 0 34cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7cqw;
  padding: 2.4cqw 2.4cqw 2.6cqw;
  border-radius: 1.4cqw;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(103, 61, 230, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #17151f 0%, #0b0a12 100%);
  text-align: left;
  user-select: none;
  transition: border-color 260ms var(--mg-ease), transform 260ms var(--mg-ease);
}

.mg-app .mg-app__rcard:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-0.3cqw);
}

.mg-app .mg-app__rtitle {
  margin: 0;
  font-family: var(--mg-display);
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #ffffff;
}

.mg-app .mg-app__rtext {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* the mark sits large in the lower half; every one of them is white */
.mg-app .mg-app__ricon,
.mg-app .mg-app__rlogo {
  order: 10;
  display: block;
  margin-top: auto;
  color: #ffffff;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 0 1.2cqw rgba(255, 255, 255, 0.28));
}

.mg-app .mg-app__ricon {
  width: 8.4cqw;
  height: 8.4cqw;
}

.mg-app .mg-app__rlogo {
  width: 86%;
  height: 8.4cqw;
}

/* the supplied SVGs come in their own colours; flattened to white */
.mg-app img.mg-app__ricon,
.mg-app img.mg-app__rlogo {
  filter: brightness(0) invert(1) drop-shadow(0 0 1.2cqw rgba(255, 255, 255, 0.28));
}

/* --- Small screens: the app drops its side columns ---------------------- */

@container screen (max-width: 430px) {
  .mg-app .mg-app__rcard { flex-basis: 46cqw; padding: 1.8cqw; }
  .mg-app .mg-app__rtext { display: none; }
  .mg-app .mg-app__ricon { width: 7cqw; height: 7cqw; }
  .mg-app .mg-app__rlogo { height: 7cqw; }
}

/* --- Page responsive ---------------------------------------------------- */

@media (max-width: 960px) {
  .mg-show .mg-show__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mg-show .mg-show__stage {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-app.is-entering {
    animation: none;
  }

  .mg-show .mg-show__item,
  .mg-show .mg-show__tab,
  .mg-show .mg-show__tab::before,
  .mg-show .mg-show__tab::after {
    transition: none;
  }
}