/* Question Bank promotion on the home page.
   Colours follow the existing site palette: navy #10233f for type, the gold
   accent used by the hero rule, and the pale blue section background. */

.qb-promo {
  background: linear-gradient(180deg, #15304f 0%, #0f2340 100%);
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
}

.qb-promo-inner {
  align-items: center;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  margin: 0 auto;
  max-width: 1180px;
}

.qb-promo .kicker { color: #d8b46a; }

.qb-promo h2 {
  color: #ffffff;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  margin: 10px 0 18px;
}

.qb-promo-lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
  margin: 0 0 26px;
  max-width: 56ch;
}

.qb-promo-points {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.qb-promo-points li {
  border-left: 2px solid rgba(216, 180, 106, 0.55);
  display: grid;
  gap: 3px;
  padding-left: 16px;
}

.qb-promo-points strong { color: #ffffff; font-size: 16px; }
.qb-promo-points span { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; line-height: 1.55; }

.qb-promo-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
}

.qb-promo-actions .button {
  background: #d8b46a;
  border: 0;
  color: #12233d;
}

.qb-promo-actions .button:hover { background: #e6c583; }
.qb-promo-actions .text-link { color: #ffffff; }

.qb-promo-note {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13.5px;
  margin: 18px 0 0;
}

/* The sample panel mirrors the "problem of the week" card in the hero so the
   product looks like part of the same site rather than a bolted-on advert. */
.qb-promo-panel {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(4, 16, 34, 0.42);
  overflow: hidden;
}

.qb-panel-head {
  align-items: center;
  background: #f4f7fb;
  border-bottom: 1px solid #e3eaf3;
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
}

.qb-panel-head span { color: #6a7c94; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.qb-panel-head b { color: #12233d; font-size: 14px; }

.qb-panel-question { padding: 22px 20px 6px; }
.qb-panel-label { color: #8a9ab0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 10px; }
.qb-panel-prompt { color: #12233d; font-size: 21px; font-weight: 600; margin: 0 0 18px; }

.qb-panel-options { display: grid; gap: 9px; }

.qb-panel-options span {
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  color: #33465f;
  font-size: 15px;
  padding: 11px 14px;
}

.qb-panel-options .is-correct {
  background: #edf9f1;
  border-color: #8fd3aa;
  color: #16653a;
  font-weight: 600;
}

.qb-panel-foot {
  background: #f4f7fb;
  border-top: 1px solid #e3eaf3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 16px 20px;
}

.qb-panel-foot div { display: grid; gap: 2px; }
.qb-panel-foot small { color: #7c8da4; font-size: 11px; }
.qb-panel-foot strong { color: #12233d; font-size: 15px; }

.header-signin { margin-right: 4px; white-space: nowrap; }

@media (max-width: 900px) {
  .qb-promo-inner { grid-template-columns: minmax(0, 1fr); }
  .qb-promo-panel { order: -1; }
}

@media (max-width: 720px) {
  .header-signin { display: none; }
}

/* --- Worked solution inside the sample question ------------------------- */
/* The method is the product, so the sample shows the whole solution rather
   than a single line confirming the answer. */
.qb-panel-working {
  border-top: 1px solid #e4e9f0;
  margin: 16px 0 18px;
  padding-top: 14px;
}

.qb-panel-working-head { color: #4a5c74; font-size: 13.5px; margin: 0 0 10px; }
.qb-panel-working-head b { color: #16653a; }

.qb-panel-steps {
  counter-reset: qb-step;
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qb-panel-steps li {
  counter-increment: qb-step;
  display: grid;
  gap: 2px;
  padding-left: 26px;
  position: relative;
}

.qb-panel-steps li::before {
  background: #eef2f8;
  border-radius: 50%;
  color: #45597a;
  content: counter(qb-step);
  font-size: 10.5px;
  font-weight: 700;
  height: 18px;
  left: 0;
  line-height: 18px;
  position: absolute;
  text-align: center;
  top: 1px;
  width: 18px;
}

.qb-step-do { color: #12233d; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
/* The reasoning is what turns a worked answer into a lesson, so it is shown
   next to every step rather than only at the end. */
.qb-step-why { color: #6d7f97; font-size: 12.5px; line-height: 1.5; }

/* --- AI homework help --------------------------------------------------- */
.qb-ai {
  background: #f5f8fc;
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
}

.qb-ai-inner {
  align-items: center;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  margin: 0 auto;
  max-width: 1180px;
}

.qb-ai .kicker { color: #b08430; }
.qb-ai h2 {
  color: #10233f;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  margin: 10px 0 18px;
}
.qb-ai .qb-promo-lead { color: #44566f; }
.qb-ai .qb-promo-points li { border-left-color: #d8b46a; }
.qb-ai .qb-promo-points strong { color: #10233f; }
.qb-ai .qb-promo-points span { color: #5b6d85; }
.qb-ai .qb-promo-note { color: #6d7f97; }

.qb-ai-phone {
  background: #ffffff;
  border: 1px solid #dde4ee;
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(16, 35, 63, 0.14);
  margin: 0 auto;
  max-width: 420px;
  overflow: hidden;
}

.qb-ai-phone-head {
  background: #10233f;
  padding: 12px 18px;
}
.qb-ai-phone-head span {
  color: #d8b46a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.qb-ai-shot { padding: 18px 18px 4px; }
.qb-ai-shot-label { color: #8a9ab0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 8px; }

/* Styled as a photographed page so it reads as the student's own work rather
   than as typed input. */
.qb-ai-handwriting {
  background: repeating-linear-gradient(180deg, #fffdf6 0, #fffdf6 27px, #eef0e4 27px, #eef0e4 28px);
  border: 1px solid #e6e3d4;
  border-radius: 10px;
  padding: 10px 14px;
}
.qb-ai-handwriting p {
  color: #2c3550;
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 15px;
  line-height: 28px;
  margin: 0;
}
.qb-ai-handwriting .is-slip { color: #b3401c; }

.qb-ai-verdict { padding: 16px 18px 20px; }
.qb-ai-status {
  color: #9a5b12;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
}
.qb-ai-line { color: #44566f; font-size: 13px; line-height: 1.6; margin: 0 0 8px; }
.qb-ai-line b { color: #10233f; }
.qb-ai-nudge {
  border-top: 1px solid #e4e9f0;
  color: #7c8da4;
  font-size: 12px;
  font-style: italic;
  margin: 12px 0 0;
  padding-top: 10px;
}

/* --- Roadmap note ------------------------------------------------------- */
/* BC is the first bank, not the only planned one; saying so keeps the claim
   accurate while the others are built. */
.qb-promo-roadmap {
  border-left: 2px solid #d8b46a;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 22px 0 0;
  padding-left: 14px;
}
.qb-promo-roadmap strong { color: #ffffff; }

@media (max-width: 900px) {
  .qb-ai-inner { grid-template-columns: minmax(0, 1fr); }
  .qb-ai-panel { order: -1; }
}