/* ============================================================================
   QUANT GUILD — HOME PAGE  (concept "01-prime")
   ----------------------------------------------------------------------------
   Page layout only. Every colour, radius, shadow and motion value comes from
   qg_tokens.css, and all shared components (buttons, chips, cards, video
   tiles, rank badges) come from qg_design_system.css.

   Loaded after the legacy home stylesheets so it wins on the surfaces this
   page now owns. Legacy rules that visibly fight the new layout are
   neutralised in the LEGACY RESET block at the end.
   ========================================================================== */

/* -------------------------------------------------------------- 1. SHELL */

body.qg-home {
  margin: 0;
  min-height: 100vh;
}

/* :where() keeps this at zero specificity so every design-system component
   class (.qg-btn--primary, .qg-tlink, ...) still wins its own colour. */
:where(.qg-home a) {
  color: inherit;
}

.qg-home ul:not(.rsm-template-list),
.qg-home ol:not(.rm-levels):not(.rsm-steps__list) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qg-home img,
.qg-home svg {
  display: block;
  max-width: 100%;
}

.qg-home p {
  margin: 0;
}

html.qg-home-html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html.qg-home-html {
    scroll-behavior: auto;
  }
}

/* The vertical rule system + margin section numbers, on very wide screens. */
.qg-rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.qg-rules span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--qg-line-soft);
}

.qg-secnum {
  position: absolute;
  top: var(--qg-section-pad);
  left: max(16px, calc(50% - var(--qg-maxw) / 2 - 56px));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--qg-text-faint);
  display: none;
}

.qg-secnum::after {
  content: '';
  display: block;
  width: 1px;
  height: 56px;
  margin: 12px 0 0 1px;
  background: linear-gradient(to bottom, var(--qg-line), transparent);
}

@media (min-width: 1200px) {
  .qg-secnum {
    display: block;
  }
}

@media (min-width: 1340px) {
  .qg-rules {
    display: block;
  }
}

/* --------------------------------------------------------------- 2. HERO */

/* The public top nav is position:fixed and publishes its own height as
   --qg-topnav-offset, so the hero clears it without a magic number. */
.qg-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--qg-topnav-offset, 66px) + var(--qg-s9));
  padding-bottom: 112px;
  background: #f1f3f7;
}

html[data-theme='dark'] .qg-hero {
  background:
    radial-gradient(980px 620px at 76% 0%, #0d2244 0%, rgba(13, 34, 68, 0) 62%),
    var(--qg-page);
}

.qg-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Contour field. The canvas is oversized so a few pixels of pointer drift
   never exposes an edge. The mask keeps the headline on quiet paper and lets
   the density gather behind the product surface. */
.qg-hero__field {
  position: absolute;
  inset: -28px;
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  display: block;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.75) 30%, #000 46%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.75) 30%, #000 46%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, #000 12%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

html[data-theme='dark'] .qg-hero__field {
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, #000 22%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, #000 14%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, #000 22%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, #000 14%, #000 78%, transparent 100%);
}

.qg-hero__mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(820px 520px at 18% 0%, rgba(0, 74, 173, 0.07), transparent 70%),
    radial-gradient(640px 480px at 88% 18%, rgba(255, 203, 5, 0.07), transparent 68%);
}

html[data-theme='dark'] .qg-hero__mesh {
  background:
    radial-gradient(860px 540px at 16% -8%, rgba(0, 102, 204, 0.2), transparent 68%),
    radial-gradient(520px 420px at 86% 22%, rgba(255, 203, 5, 0.07), transparent 70%);
}

.qg-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.08  0 0 0 0 0.16  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

html:not([data-theme='dark']) .qg-hero__grain {
  opacity: 0.05;
}

html[data-theme='dark'] .qg-hero__grain {
  opacity: 0.18;
  mix-blend-mode: soft-light;
}

@media (max-width: 1080px) {
  .qg-hero__field {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 46%, transparent 78%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 46%, transparent 78%);
    mask-composite: add;
    -webkit-mask-composite: source-over;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qg-hero__field {
    transform: none !important;
  }
}

.qg-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: var(--qg-s10);
  align-items: center;
}

.qg-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 13px 0 9px;
  border-radius: var(--qg-r-pill);
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  box-shadow: var(--qg-sh-hair);
  font-size: var(--qg-fs-xs);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--qg-text-body);
}

.qg-hero__badge .qg-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
  animation: qg-live-pulse 2.4s ease-out infinite;
}

@keyframes qg-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.qg-hero__copy {
  container-type: inline-size;
  min-width: 0;
}

.qg-hero h1 {
  margin-top: 28px;
  white-space: nowrap;
  font-size: clamp(28px, 6.6cqi, 44px);
}

.qg-hero__with {
  display: block;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--qg-text-muted);
}

body.qg-home .qg-hero__sub {
  margin-top: 32px;
  margin-bottom: 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--qg-text-body);
}

.qg-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qg-s3);
  margin-top: 32px;
}

.qg-hero__cta .qg-btn {
  box-shadow: 0 1px 2px rgba(12, 17, 27, 0.06), 0 6px 16px rgba(12, 17, 27, 0.1);
}

.qg-hero__cta .qg-btn:hover {
  box-shadow: 0 2px 4px rgba(12, 17, 27, 0.08), 0 10px 22px rgba(12, 17, 27, 0.14);
}

html[data-theme='dark'] .qg-hero__cta .qg-btn {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.35);
}

html[data-theme='dark'] .qg-hero__cta .qg-btn:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 24px rgba(0, 0, 0, 0.45);
}

body.qg-home .qg-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--qg-s3) var(--qg-s4);
  margin-top: 40px;
}

.qg-trust li {
  display: flex;
  align-items: center;
  gap: var(--qg-s2);
  font-size: 13px;
  font-weight: 500;
  color: var(--qg-text-muted);
  white-space: nowrap;
}

.qg-trust li i {
  font-size: 11px;
  color: var(--qg-accent);
}

.qg-trust li + li {
  padding-left: var(--qg-s4);
  border-left: 1px solid var(--qg-line);
}

/* Same desktop band as the careers hero: padding plus a 589px inner column.
   The copy is a few pixels short of that, except on a narrow desktop where
   the trust line wraps and the column runs long. Hold the careers height,
   and keep the trust line on one row when the column is tight. */
@media (min-width: 1081px) {
  body.qg-home:not(.qg-capital) .qg-hero__inner {
    min-height: 589px;
  }
}

@container (max-width: 495px) {
  @media (min-width: 1081px) {
    .qg-hero__copy .qg-trust {
      gap: 6px 8px;
    }

    .qg-hero__copy .qg-trust li {
      font-size: 12px;
      gap: 6px;
    }

    .qg-hero__copy .qg-trust li + li {
      padding-left: 8px;
    }
  }
}

.qg-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qg-s2);
  margin-top: var(--qg-s8);
  padding-top: 28px;
  border-top: 1px solid var(--qg-line);
}

.qg-quick__label {
  width: 100%;
  margin-bottom: var(--qg-s1);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--qg-text-faint);
}

.qg-meet {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--qg-line);
}

.qg-meet__label {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--qg-text-faint);
}

.qg-meet__counter {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
}

.qg-meet__counter iframe {
  display: block;
  width: 420px !important;
  max-width: 100%;
  height: 96px !important;
  border: 0;
  border-radius: 12px;
  background: var(--qg-surface);
  box-shadow: 0 1px 2px rgba(12, 17, 27, 0.06), 0 6px 16px rgba(12, 17, 27, 0.1);
}

html[data-theme='dark'] .qg-meet__counter iframe {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------- 3. HERO PRODUCT SURFACE */

.qg-surface {
  position: relative;
}

.qg-surface__card {
  position: relative;
  z-index: 2;
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-panel);
  box-shadow: var(--qg-sh-float);
  overflow: hidden;
}

.qg-surface__bar {
  display: flex;
  align-items: center;
  gap: var(--qg-s2);
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--qg-line);
  background: linear-gradient(180deg, var(--qg-surface), var(--qg-surface-2));
}

.qg-surface__tl {
  display: flex;
  gap: 6px;
}

.qg-surface__tl i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qg-line);
  display: block;
}

.qg-surface__addr {
  margin-left: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--qg-r-pill);
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--qg-text-muted);
  letter-spacing: 0.01em;
}

.qg-surface__addr i {
  font-size: 8.5px;
  color: var(--qg-text-faint);
}

.qg-surface__body {
  padding: var(--qg-s5);
}

.qg-surface__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--qg-s4);
}

.qg-surface__kicker {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--qg-text-muted);
}

.qg-surface__title {
  display: block;
  margin-top: 5px;
  font-family: var(--qg-font-display);
  font-size: var(--qg-fs-h3);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--qg-text);
}

.qg-surface__prog {
  margin-top: 18px;
}

.qg-surface__dials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--qg-s5);
}

.qg-surface__dial {
  padding: 14px 10px var(--qg-s3);
  text-align: center;
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-card);
  transition: border-color var(--qg-dur) var(--qg-ease),
    box-shadow var(--qg-dur) var(--qg-ease),
    transform var(--qg-dur) var(--qg-ease);
}

.qg-surface__dial:hover {
  border-color: var(--qg-line-strong);
  box-shadow: var(--qg-sh-hair);
  transform: translateY(-1px);
}

.qg-surface__dial .qg-dial {
  width: 62px;
  height: 62px;
}

.qg-surface__dial .qg-dial svg {
  width: 62px;
  height: 62px;
}

.qg-surface__dial .qg-dial__val b {
  font-size: 16px;
}

.qg-surface__dial .qg-dial__val em {
  display: none;
}

.qg-surface__dial .qg-dial-meta {
  margin-top: 9px;
  flex-direction: column;
  gap: 3px;
}

.qg-surface__dial .qg-dial-meta__name {
  font-size: 11px;
  color: var(--qg-text-body);
}

.qg-surface__dial .qg-delta {
  font-size: 10.5px;
}

.qg-surface__ladder {
  margin-top: var(--qg-s3);
}

.qg-surface__ladder .qg-ladder__rungs .qg-rank__crest svg {
  width: 19px;
  height: 22px;
}

.qg-surface__ladder .qg-ladder__rungs .qg-rank__crest text {
  font-size: 7px;
}

/* --------------------------------------------------------- 4. PLACEMENTS */

#proof .qg-plc {
  margin-top: var(--qg-s9);
}

.qg-plc {
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-card);
  background: var(--qg-surface);
  box-shadow: var(--qg-sh-hair);
  overflow: hidden;
}

.qg-plc__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qg-s3);
  padding: var(--qg-s4) var(--qg-s6);
  border-bottom: 1px solid var(--qg-line);
  background: var(--qg-surface-2);
}

.qg-plc__head span {
  font-size: var(--qg-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--qg-text-muted);
  text-align: center;
}

.qg-plc__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--qg-s2) 0;
}

.qg-plc__logos li {
  flex: 1 1 150px;
  display: grid;
  place-items: center;
  padding: var(--qg-s6) var(--qg-s5);
  min-width: 0;
}

.qg-plc__logos li + li {
  box-shadow: inset 1px 0 0 var(--qg-line);
}

/* Source logos are white-on-transparent, so they are inverted for the band. */
.qg-plc__logos img {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: invert(1) grayscale(1) opacity(0.55);
  transition: filter var(--qg-dur-slow) var(--qg-ease), transform var(--qg-dur-slow) var(--qg-ease);
}

.qg-plc__logos li:hover img {
  filter: invert(1) grayscale(0) opacity(1);
  transform: translateY(-1px);
}

html[data-theme='dark'] .qg-plc__logos img {
  filter: grayscale(1) opacity(0.6);
}

html[data-theme='dark'] .qg-plc__logos li:hover img {
  filter: grayscale(0) opacity(1);
}

.qg-plc__more {
  font-size: var(--qg-fs-sm);
  font-weight: 500;
  color: var(--qg-text-muted);
  white-space: nowrap;
}

/* -------------------------------------------------------------- 5. PROOF */

/* .qg-home ul { margin: 0 } beats a single class, so the page prefix is required. */
body.qg-home .qg-stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--qg-s6);
  margin-top: 56px;
}

.qg-reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qg-s6);
  margin-top: 40px;
}

.qg-review {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-card);
  padding: var(--qg-s7);
  margin: 0;
  box-shadow: var(--qg-sh-hair);
  transition: box-shadow var(--qg-dur-slow) var(--qg-ease), border-color var(--qg-dur-slow) var(--qg-ease);
}

.qg-review:hover {
  box-shadow: var(--qg-sh-card);
  border-color: var(--qg-line-strong);
}

.qg-stars {
  display: flex;
  gap: 3px;
  color: var(--qg-gold);
  font-size: 13px;
}

.qg-quotemark {
  position: absolute;
  right: 26px;
  top: 18px;
  font-family: var(--qg-font-display), Georgia, serif;
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  color: var(--qg-line-soft);
  user-select: none;
}

.qg-review blockquote {
  position: relative;
  margin: 18px 0 var(--qg-s6);
  font-size: 16px;
  line-height: var(--qg-lh-relaxed);
  color: var(--qg-text-body);
  letter-spacing: var(--qg-ls-body);
}

.qg-review__by {
  display: flex;
  align-items: center;
  gap: var(--qg-s3);
  margin-top: auto;
  padding-top: var(--qg-s5);
  border-top: 1px solid var(--qg-line);
}

.qg-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--qg-line);
  background: var(--qg-surface-tint);
}

.qg-avatar--initial {
  display: grid;
  place-items: center;
  border-color: var(--qg-surface-tint-line);
  color: var(--qg-accent);
  font-family: var(--qg-font-display);
  font-size: var(--qg-fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.qg-review__name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--qg-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.qg-review__src {
  display: block;
  font-size: 12.5px;
  color: var(--qg-text-muted);
  line-height: 1.4;
}

/* .qg-home ul { margin: 0 } outranks a single class, so the page
   prefix is required for this gap to actually apply. */
body.qg-home .qg-pulls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--qg-s6);
  margin-top: 40px;
}

.qg-pull {
  padding: var(--qg-s6);
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-card);
  background: var(--qg-surface);
  transition: border-color var(--qg-dur) var(--qg-ease), background var(--qg-dur) var(--qg-ease);
}

.qg-pull:hover {
  border-color: var(--qg-accent-line);
  background: var(--qg-surface-tint);
}

.qg-pull__mark {
  font-size: var(--qg-fs-xs);
  color: var(--qg-text-faint);
}

.qg-pull p {
  margin-top: var(--qg-s3);
  font-size: 14.5px;
  line-height: var(--qg-lh-base);
  color: var(--qg-text);
  letter-spacing: var(--qg-ls-body);
}

.qg-pull cite {
  display: block;
  margin-top: 14px;
  font-size: var(--qg-fs-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--qg-text-muted);
}

/* ------------------------------------------------------- 6. PLATFORM BENTO */

.qg-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--qg-s5);
  margin-top: var(--qg-s9);
}

.qg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-card);
  padding: 28px;
  box-shadow: var(--qg-sh-hair);
  transition: box-shadow var(--qg-dur-slow) var(--qg-ease),
    transform var(--qg-dur-slow) var(--qg-ease),
    border-color var(--qg-dur-slow) var(--qg-ease);
}

.qg-tile:hover {
  box-shadow: var(--qg-sh-card);
  transform: translateY(-2px);
  border-color: var(--qg-line-strong);
}

.qg-tile--2 { grid-column: span 2; }
.qg-tile--3 { grid-column: span 3; }

.qg-tile .qg-medallion {
  margin-bottom: var(--qg-s5);
}

.qg-tile .qg-eyebrow {
  margin-bottom: 10px;
}

.qg-tile .qg-h3 {
  margin-bottom: var(--qg-s2);
}

.qg-tile p {
  font-size: 14.5px;
  line-height: var(--qg-lh-base);
  color: var(--qg-text-muted);
}

.qg-tile .qg-tlink {
  margin-top: auto;
  padding-top: var(--qg-s5);
  align-self: flex-start;
}

.qg-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--qg-s4);
  flex-wrap: wrap;
}

/* Interview sample inset. */
.qg-tile .qg-inset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  margin-top: var(--qg-s5);
}

.qg-inset__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--qg-surface);
  border: 1px solid var(--qg-surface-tint-line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--qg-accent);
}

.qg-formula {
  display: block;
  margin-top: 14px;
  color: var(--qg-text);
  overflow-x: auto;
}

.qg-formula mjx-container {
  margin: 0 !important;
  outline: none;
}

.qg-formula mjx-container[display="true"] {
  margin: 4px 0 0 !important;
}

.qg-formula__int {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: none;
  font-style: normal;
  line-height: 1;
  color: var(--qg-accent);
}

.qg-formula__bound {
  font-family: var(--qg-font-mono);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  color: var(--qg-text-muted);
}

.qg-formula__glyph {
  display: block;
  width: 18px;
  height: 40px;
}

.qg-formula__frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  font-size: 17px;
  line-height: 1.1;
}

.qg-formula__frac > span:first-child {
  padding: 0 7px 3px;
  border-bottom: 1.5px solid currentColor;
}

.qg-formula__frac > span:last-child {
  padding: 3px 7px 0;
}

.qg-formula__fn {
  font-family: var(--qg-font-mono);
  font-style: normal;
  font-size: 14px;
  margin-right: 3px;
}

.qg-formula__term { font-style: italic; }
.qg-formula__op {
  font-family: var(--qg-font-mono);
  font-style: normal;
  color: var(--qg-text-muted);
}
.qg-formula__q {
  font-family: var(--qg-font-mono);
  font-style: normal;
  color: var(--qg-accent);
  font-weight: 500;
}

/* Plotly visual wells inside tiles (lesson chart + vol surface). */
.qg-tile__viz {
  position: relative;
  margin-top: var(--qg-s5);
  border-radius: var(--qg-r-ctl);
  border: 1px solid var(--qg-surface-tint-line);
  background: var(--qg-surface-tint);
  overflow: hidden;
  min-height: 150px;
}

.qg-tile__viz > div {
  width: 100%;
  height: 160px;
}

/* Flagship courses panel. */
.qg-tile--flag {
  background: linear-gradient(180deg, var(--qg-surface) 0%, var(--qg-surface-2) 100%);
}

.qg-flag__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--qg-s5);
  flex-wrap: wrap;
}

.qg-flag-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--qg-s6);
}

.qg-flag-list {
  min-width: 0;
  padding: 12px 8px 2px;
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-ctl);
  background: var(--qg-surface);
}

.qg-flag-list__label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qg-accent);
}

.qg-flag-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qg-flag-list li + li {
  border-top: 1px solid var(--qg-line);
}

.qg-flag-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--qg-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.qg-flag-list__name {
  min-width: 0;
  white-space: nowrap;
}

.qg-flag-list__meta {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--qg-text-muted);
  font-variant-numeric: tabular-nums;
}

.qg-flag-list a.is-soon {
  color: var(--qg-text-muted);
  font-weight: 500;
}

.qg-flag-list a.is-soon .qg-flag-list__meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qg-flag-list a:hover {
  color: var(--qg-accent);
}

/* ---------------------------------------------------- 7. FINAL CONVERSION */

.qg-conv {
  position: relative;
  padding-block: var(--qg-section-pad);
}

.qg-conv__card {
  position: relative;
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-panel);
  background: var(--qg-surface);
  box-shadow: var(--qg-sh-card);
  overflow: hidden;
}

.qg-conv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

.qg-conv__left {
  padding: var(--qg-s9);
}

.qg-conv__left .qg-h1 {
  margin-bottom: var(--qg-s4);
}

.qg-conv__left > p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--qg-text-muted);
  max-width: 460px;
}

.qg-conv__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--qg-s8);
}

.qg-conv__stats li {
  padding-right: var(--qg-s5);
}

.qg-conv__stats li + li {
  padding-left: var(--qg-s5);
  border-left: 1px solid var(--qg-line);
}

.qg-conv__stats b {
  display: block;
  font-family: var(--qg-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--qg-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.qg-conv__stats span {
  display: block;
  margin-top: 5px;
  font-size: var(--qg-fs-xs);
  font-weight: 500;
  color: var(--qg-text-muted);
  letter-spacing: 0.01em;
}

.qg-conv__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qg-s3);
  margin-top: var(--qg-s8);
}

.qg-conv__note {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--qg-text-faint);
}

.qg-conv__right {
  padding: var(--qg-s9) var(--qg-s8);
  background: var(--qg-surface-2);
  border-left: 1px solid var(--qg-line);
}

.qg-conv__right h3 {
  margin: 0 0 var(--qg-s5);
  font-size: var(--qg-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--qg-text-muted);
}

.qg-inside li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--qg-text);
  letter-spacing: var(--qg-ls-body);
}

.qg-inside li + li {
  border-top: 1px solid var(--qg-line);
}

.qg-inside i {
  flex: none;
  font-size: 10px;
  color: var(--qg-accent);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--qg-wash);
  display: grid;
  place-items: center;
}

/* ------------------------------------------------------------- 8. FOOTER */

.qg-footer {
  border-top: 0;
  background: var(--qg-blue);
  color: rgba(255, 255, 255, 0.78);
  padding-top: var(--qg-s10);
}

.qg-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  gap: var(--qg-s8);
}

.qg-footer__brand p {
  margin-top: var(--qg-s5);
  font-size: 14px;
  line-height: var(--qg-lh-base);
  color: rgba(255, 255, 255, 0.78);
  max-width: 270px;
}

.qg-brand {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.qg-brand img {
  display: block;
  height: 48px;
  width: auto;
}

.qg-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
}

.qg-socials a {
  width: 30px;
  height: 30px;
  border-radius: var(--qg-r-ctl);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 13px;
  background: transparent;
  text-decoration: none;
  transition: color var(--qg-dur) var(--qg-ease),
    background var(--qg-dur) var(--qg-ease),
    border-color var(--qg-dur) var(--qg-ease),
    transform var(--qg-dur) var(--qg-ease);
}

.qg-socials a:hover {
  color: var(--qg-blue);
  background: #fff;
  border-color: #fff;
  transform: translateY(-1px);
}

.qg-footer__col h4 {
  margin: 0 0 var(--qg-s4);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #fff;
}

.qg-footer__col li + li {
  margin-top: 10px;
}

.qg-footer__col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--qg-dur-fast) var(--qg-ease);
}

.qg-footer__col a:hover {
  color: #fff;
}

.qg-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--qg-s3);
  margin-top: var(--qg-s9);
  padding: var(--qg-s6) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.qg-footer__bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qg-s5);
}

.qg-footer__bar a {
  text-decoration: none;
  transition: color var(--qg-dur-fast) var(--qg-ease);
}

.qg-footer__bar a:hover {
  color: #fff;
}

.qg-footer__disc + .qg-footer__bar {
  margin-top: 28px;
}

/* -------------------------------------------------------- 9. RESPONSIVE */

@media (max-width: 1080px) {
  .qg-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--qg-s9);
  }

  .qg-hero__sub {
    max-width: none;
  }

  .qg-conv__grid {
    grid-template-columns: 1fr;
  }

  .qg-conv__right {
    border-left: 0;
    border-top: 1px solid var(--qg-line);
  }

  .qg-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qg-footer__brand {
    grid-column: span 3;
  }
}

@media (max-width: 900px) {
  .qg-stories,
  .qg-pulls,
  .qg-reviews,
  .qg-bento {
    grid-template-columns: 1fr;
  }

  .qg-tile--2,
  .qg-tile--3 {
    grid-column: span 1;
  }

  .qg-flag-lists {
    grid-template-columns: 1fr;
  }

  .qg-plc__logos li {
    flex-basis: 33.333%;
  }

  .qg-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qg-footer__brand {
    grid-column: span 3;
  }

  .qg-plc__logos li + li {
    box-shadow: none;
  }
}

@media (max-width: 620px) {
  .qg-meet__counter iframe {
    height: 84px !important;
  }

  .qg-hero {
    /* Keep the fixed nav's height. Dropping it parks the badge under the bar. */
    padding-top: calc(var(--qg-topnav-offset, 72px) + 24px);
    padding-bottom: var(--qg-s10);
  }

  .qg-hero__cta .qg-btn {
    width: 100%;
  }

  .qg-trust {
    gap: var(--qg-s2) var(--qg-s5);
  }

  .qg-trust li + li {
    padding-left: 0;
    border-left: 0;
  }

  .qg-conv__left,
  .qg-conv__right {
    padding: var(--qg-s7) var(--qg-s6);
  }

  .qg-conv__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--qg-s5) 0;
  }

  .qg-conv__stats li:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .qg-conv__cta .qg-btn {
    width: 100%;
  }

  .qg-review {
    padding: var(--qg-s6);
  }

  .qg-tile {
    padding: 22px;
  }

  .qg-plc__logos li {
    flex-basis: 50%;
    padding: 18px var(--qg-s3);
  }

  .qg-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--qg-s7);
  }

  .qg-footer__brand,
  .qg-footer__col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 400px) {
  .qg-surface__dials {
    gap: 6px;
  }

  .qg-surface__body {
    padding: var(--qg-s4);
  }
}

/* ======================================================== 10. LEGACY RESET
   home.css / home_excess.css / home_bento.css style the elements this page no
   longer renders, but a few of their rules are broad enough to reach the new
   markup. Neutralise exactly those. */

body.qg-home header:not(.qg-topnav):not(.rm-track__head):not(.rm-start__head) {
  display: block;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

body.qg-home .hero,
body.qg-home .hero-content,
body.qg-home .hero-text {
  all: unset;
}

body.qg-home section {
  background: none;
}

/* Light mode: hero gray, then white, then gray. Footer stays blue. */
html:not([data-theme='dark']) body.qg-home #proof,
html:not([data-theme='dark']) body.qg-home #roadmap-section,
html:not([data-theme='dark']) body.qg-home #start {
  background: #fff;
}

html:not([data-theme='dark']) body.qg-home .qg-hero,
html:not([data-theme='dark']) body.qg-home #platform-section,
html:not([data-theme='dark']) body.qg-home #resume-section {
  background: #f1f3f7;
}

/* The testimonial player keeps its own macro styling and its own cover image
   + play facade (pol_testimonial_video.js), so it just has to fill the new
   video frame. The frame's decorative grid is dropped where real media sits. */
body.qg-home .qg-video__thumb {
  cursor: default;
}

body.qg-home .qg-video__thumb:has(.pol-testimonial-media)::after {
  display: none;
}

body.qg-home .pol-testimonial-media {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 0;
  width: 100%;
  height: 100%;
}

body.qg-home .pol-testimonial-media video,
body.qg-home .pol-testimonial-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------- 10. ROADMAP + RESUME */

body.qg-home .qg-home-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 36px;
  padding: 0;
  background: none;
  box-shadow: none;
}

.qg-home-idx {
  margin-top: 0.55em;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--qg-text-faint);
  font-variant-numeric: tabular-nums;
}

.qg-home-title {
  margin: 0;
  font-family: var(--qg-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--qg-text);
}

body.qg-home .qg-home-lede {
  margin: 10px 0 0;
  max-width: 40rem;
  font-size: 16px;
  line-height: 1.5;
  color: var(--qg-text-muted);
}