:root{color-scheme: dark}
html,body{color-scheme: dark}
/* Quiz Meet — shared element styles (generated from the design). */
.q1{position: relative;overflow: hidden;background: var(--ink)}
.q6{color: var(--yellow)}
.q8{color: var(--yellow)}
.qa{flex: 1 1 380px;min-width: 0}
.qf{position: absolute;inset: 0;width: 100%;height: 100%;border: 0;display: block}
.qj{background: var(--ink)}
.qm{margin: 24px -24px 0;padding: 4px 24px 8px;display: flex;gap: 14px;overflow-x: auto;scroll-snap-type: x mandatory;scroll-padding: 0 24px;-webkit-overflow-scrolling: touch;scrollbar-width: none}
.qt{background: #141410}
.qv{margin: 12px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(30px, 9.2vw, 68px);line-height: 0.94;color: var(--paper)}
.qw{margin: 22px 0 0;max-width: 680px;font-size: clamp(18px, 4.8vw, 21px);line-height: 1.5;color: rgba(250,250,247,0.85);text-wrap: pretty}
.q1f{background: var(--ink);padding: 56px 16px}
.q1n{display: flex;flex-direction: column;gap: 10px}
.q1v{background: var(--ink);border-top: 1px solid rgba(250,250,247,0.14)}
.q1w{max-width: 1180px;margin: 0 auto;padding: 52px 24px 44px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 32px 48px}
.q1x{display: flex;flex-direction: column;gap: 18px}
.q1y{height: 30px;width: auto;align-self: flex-start;display: block;filter: invert(1)}
.q1z{margin: 0;font-size: 16px;line-height: 1.7;color: rgba(250,250,247,0.75)}
.q20{color: var(--paper)}
.q21{margin: 0;font-size: 13px;font-weight: 700;letter-spacing: 0.18em;text-transform: uppercase;color: var(--yellow)}
.q22{display: block}
.q23{width: min(300px, 78vw);height: auto;display: block;filter: invert(1)}
.q24{max-width: 1180px;margin: 0 auto;margin-top: 0;margin-bottom: 0;padding: 0 24px 36px;font-size: 13px;color: rgba(250,250,247,0.4)}
.q25{background: var(--paper);font-family: var(--sans)}
.q2t{margin: 12px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(32px, 9vw, 56px);line-height: 0.96;color: var(--paper)}
.q39{margin-top: 14px;display: flex;gap: 8px}
.q3h{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 26px;line-height: 1;color: var(--ink)}
.q3o{margin: 22px -24px 0;padding: 4px 24px 8px;display: flex;gap: 14px;overflow-x: auto;scroll-snap-type: x mandatory;scroll-padding: 0 24px;-webkit-overflow-scrolling: touch;scrollbar-width: none}
.q4e{margin-top: 20px}
.q4u{margin-top: 16px;display: flex;flex-wrap: wrap;gap: 8px}
.q4x{margin: 0 4px 12px;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 20px;line-height: 1;color: var(--paper)}
.q4z{display: flex;flex-direction: column;gap: 6px}
.q6p{margin-top: 16px;display: flex;flex-direction: column;gap: 10px}
.q71{background: var(--ink);min-height: 100vh;font-family: var(--sans);display: flex;flex-direction: column}
.q7v{display: block;transform: translateY(-1px)}
.q7y{color: var(--yellow)}
.q83{display: flex;align-items: center;gap: 18px}
.q84{margin: 0;font-family: var(--display);font-weight: 400;font-size: 28px;line-height: 1;text-transform: uppercase;color: var(--paper)}
.q85{flex: 1;height: 3px;background: rgba(250,250,247,0.14)}
.q86{margin-top: 18px;display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 16px}
.q88{display: flex;align-items: center;gap: 10px}
.q8x{margin: 14px 0 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(44px, 13vw, 76px);line-height: 0.92;color: var(--paper)}
.q91{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: clamp(26px, 7.4vw, 40px);line-height: 1;color: var(--paper)}
.q92{margin: 16px -24px 0;padding: 4px 24px 8px;display: flex;gap: 12px;overflow-x: auto;scroll-snap-type: x mandatory;scroll-padding: 0 24px;-webkit-overflow-scrolling: touch;scrollbar-width: none}
.q9k{display: flex;flex-wrap: wrap;gap: 6px}
.q9q{margin-top: 14px;display: flex;flex-direction: column;gap: 10px}
.q9t{display: flex;align-items: center;gap: 12px}
.qa3{border-top: 1px solid rgba(250,250,247,0.14)}
.qa4{max-width: 1280px;margin: 0 auto;padding: 34px 40px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 20px}
.qa5{margin: 0;font-size: 14px;color: rgba(250,250,247,0.5)}
.qa6{text-align: right}
.qa7{margin: 0;font-size: 12px;font-weight: 700;letter-spacing: 0.16em;text-transform: uppercase;color: rgba(250,250,247,0.5)}
.qa8{margin: 6px 0 0;font-size: 14px;font-weight: 700;letter-spacing: 0.06em;color: var(--yellow)}
.qa9{height: 48px;width: auto;display: block;filter: invert(1)}
.qaf{min-width: 0}
.qap{background: var(--ink);min-height: 100vh;font-family: var(--sans)}
.qbb{margin-top: 40px}
.qbm{margin-top: 10px;display: flex;flex-direction: column;gap: 6px}
.qbs{display: flex;flex-wrap: wrap;gap: 8px}
.qbt{display: flex;gap: 8px}
.qc0{margin-top: 12px;display: flex;flex-direction: column;gap: 8px}
.qc8{margin: 14px 0 0;font-size: 14px;line-height: 1.5;color: rgba(250,250,247,0.5)}
.qcj{display: flex;align-items: flex-start;justify-content: space-between;gap: 14px}
.qck{margin: 0;font-family: var(--display);font-weight: 400;text-transform: uppercase;font-size: 24px;line-height: 1.05;color: var(--paper)}
.qct{position: fixed;inset: 0;z-index: 200;background: rgba(10,10,10,0.97);display: flex;align-items: center;justify-content: center;padding: 28px}
.qcu{box-sizing: border-box;width: 100%;max-width: 560px;border: 3px solid var(--yellow);padding: 40px 42px 44px}
.qcv{margin: 18px 0 0;font-family: var(--display);font-size: 44px;line-height: 1;font-weight: 400;text-transform: uppercase;color: var(--paper)}
.qcw{margin: 18px 0 0;font-size: 18px;line-height: 1.5;color: rgba(250,250,247,0.78)}
.qcx{margin-top: 28px;display: flex;flex-wrap: wrap;gap: 12px}
.qcy{background: var(--yellow);padding: 16px 30px;font-size: 14px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--ink)}
.qcz{border: 3px solid rgba(250,250,247,0.3);padding: 13px 26px;font-size: 14px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--paper)}
.qda{margin-top: 18px;display: flex;flex-direction: column;gap: 10px}
.qdq{display: flex;flex-wrap: wrap;gap: 10px}
.qdt{display: flex;align-items: center;justify-content: space-between;gap: 16px}
.qe1{flex: 1}
.qe2{max-width: 1180px;margin: 0 auto;padding: 56px 40px 90px}
.qe3{position: relative;text-align: center}
.qe6{display: flex;flex-wrap: wrap;align-items: center;gap: 18px}
.qe7{flex: 1 1 220px;min-width: 0}
.qe9{margin: 8px 0 0;font-size: 14px;letter-spacing: 0.1em;text-transform: uppercase;color: rgba(250,250,247,0.45)}
.qea{display: flex;flex-wrap: wrap;gap: 10px;align-items: center}
.qeb{flex: 1 1 180px;box-sizing: border-box;border: 2px solid rgba(250,250,247,0.24);background: rgba(250,250,247,0.06);padding: 11px 14px;font-size: 16px;color: var(--paper)}
.qec{flex: 1 1 160px;box-sizing: border-box;border: 2px solid rgba(250,250,247,0.24);background: rgba(250,250,247,0.06);padding: 11px 14px;font-size: 16px;color: var(--paper)}
.qee{display: flex;align-items: center;gap: 8px}
.qei{border-top: 4px solid rgba(250,250,247,0.16);padding-top: 12px}
.qej{margin: 0;font-family: var(--display);font-size: 22px;line-height: 1.05;color: var(--yellow)}
.qek{margin: 7px 0 0;font-size: 12px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: rgba(250,250,247,0.5)}
.qem{margin: 18px 0 0;font-family: var(--display);font-size: 62px;line-height: 0.98;font-weight: 400;text-transform: uppercase;color: var(--paper)}
.qen{margin: 18px 0 0;max-width: 720px;font-size: 20px;line-height: 1.5;color: rgba(250,250,247,0.82)}
.qeq{font-family: var(--display);font-size: 22px;line-height: 1;text-transform: uppercase;color: var(--paper)}
.qfh{flex: 1;display: flex;flex-direction: column}
.qg2{margin: 0;font-size: 14px;font-weight: 700;color: rgba(10,10,10,0.65)}
.qh5{margin-top: 48px}
.qh6{display: flex;align-items: center;gap: 16px}
.qh8{flex: 1;height: 6px;background: var(--yellow)}
.qh9{margin-top: 18px}
.qhd{background: rgba(250,250,247,0.05);padding: 26px 30px 28px}
.qht{margin: 0;font-size: 16px;font-weight: 700;color: var(--paper)}
.qhu{margin: 0;font-family: var(--display);font-size: 17px;line-height: 1;color: var(--yellow)}
.qia{margin-top: 22px}
.qii{box-sizing: border-box;width: 100%;max-width: 620px;max-height: 86vh;overflow-y: auto;background: #141410;border-top: 4px solid var(--yellow);padding: 26px 26px 30px}
.qij{margin: 0;font-family: var(--display);font-size: 24px;line-height: 1;text-transform: uppercase;color: var(--paper)}
.qj6{margin: 0;font-size: 13px;letter-spacing: 0.1em;text-transform: uppercase;color: rgba(250,250,247,0.4)}
.qjm{max-width: 760px;margin: 0 auto;padding: 90px 40px 120px}
.qjn{margin: 20px 0 0;font-family: var(--display);font-weight: 400;font-size: 54px;line-height: 0.98;text-transform: uppercase;color: var(--paper)}
.qjo{margin: 22px 0 0;font-size: 20px;line-height: 1.5;color: rgba(250,250,247,0.8)}
.qjp{display: inline-block;margin-top: 28px;border-radius: 999px;background: #8B3FE8;padding: 16px 30px;font-size: 14px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: #FFFFFF}
.ql7{max-width: 1280px;margin: 0 auto;padding: 44px 40px 90px}
.qm4{display: flex;flex-wrap: wrap;align-items: center;gap: 8px}
.qmr{display: flex;flex-wrap: wrap;align-items: center;gap: 10px}
.qnd{margin-top: 10px;display: flex;flex-wrap: wrap;gap: 6px}
.qnx{margin-top: 20px;display: flex;flex-wrap: wrap;gap: 10px}
.qod{display: flex;flex-wrap: wrap;align-items: center;gap: 12px}
.qqj{margin-top: 14px;overflow-x: auto}
.qr6{display: inline-block;margin-top: 28px;border-radius: 999px;background: var(--yellow);padding: 16px 30px;font-size: 14px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--ink)}
.qr8{margin: 16px 0 0;font-family: var(--display);font-weight: 400;font-size: 50px;line-height: 0.98;text-transform: uppercase;color: var(--paper)}
.qrb{margin-top: 26px;display: flex;flex-wrap: wrap;gap: 8px}
.qre{margin: 0 0 10px;font-size: 12px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(250,250,247,0.5)}
.qrf{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;margin-bottom: 10px}
.qrg{margin: 0;font-size: 12px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(250,250,247,0.5)}
.qrh{border: 2px solid rgba(250,250,247,0.25);border-radius: 999px;background: transparent;padding: 6px 12px;font-size: 11px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;cursor: pointer;color: rgba(250,250,247,0.8)}
.qrk{display: inline-flex;align-items: center;justify-content: center;min-width: 46px;height: 32px;padding: 0 10px;border-radius: 999px;background: var(--yellow);font-family: var(--display);font-weight: 400;font-size: 14px;line-height: 1;color: var(--ink)}
.qrq{margin: 0;font-size: 14px;color: rgba(250,250,247,0.55)}
.qrx{color: #0A0A0A}
.qrz{margin: 0;font-size: 8pt;font-weight: 700;letter-spacing: 0.16em;text-transform: uppercase;color: #6A6A62}
.qs6{width: 0.48in;height: 0.48in;display: block}
.qsa{margin-top: 6pt;display: flex;flex-wrap: wrap;gap: 5pt}

/* Shared body paragraph: section intros and lead copy across the site.
   Colour and weight stay with each paragraph's own class. */
p.description, .qc.description {
  margin-top: 20px;
  max-width: 680px;
  font-size: clamp(17px, 4.6vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Shared body text inside cards. Colour and max width stay with each card. */
p.card-description {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Bracketed section label above a heading, e.g. [ WEEKLY PRACTICE ]. */
p.eyebrow {
  margin-top: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Shared section title, e.g. JUMP WHEN YOU KNOW IT. Colour stays with each section. */
.title {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(32px, 9vw, 56px);
  line-height: 0.96;
  text-wrap: balance;
}

@layer qmbase {
/* Footer D&J logo always keeps its proportions */
.q23{height: auto !important;max-height: none !important;aspect-ratio: auto !important;object-fit: contain !important}
@media (max-width: 860px){
  /* Home hero: the dark overlay must not get card corners the photo doesn't have */
  .q4{border-radius: 0 !important}
  /* Home weekends: swipeable cards on phones */
  .q10{display: flex !important;overflow-x: auto !important;scroll-snap-type: x mandatory;scroll-padding: 0 20px;gap: 14px !important;margin-left: -20px !important;margin-right: -20px !important;padding: 2px 20px 8px !important;scrollbar-width: none}
  .q10 > div{margin-left: 0 !important}
  .q10::-webkit-scrollbar{display: none}
  .q10 > div{flex: 0 0 78%;scroll-snap-align: start;min-width: 0}
  /* About: room under the hero play button, no yellow rule on the impact box */
  .q29 > div:last-child{margin-bottom: 28px}
  .q2l{border-left: 0 !important;padding-left: 0 !important}
}

/* Hero overlay never rounds (auth.js rounds backgrounds up to 900px) */
#dc-root .q4{border-radius: 0 !important}
/* D&J logo: beat any footer sizing rule and keep its ratio */
#dc-root footer img.q23,#dc-root footer a img.q23{width: min(300px, 78vw) !important;height: auto !important;max-height: none !important;aspect-ratio: auto !important;object-fit: contain !important}

}

.nowrap{white-space: nowrap}