/* =====================================================================
   ADDITIONS (Oct 2026): Summer calculator embed, The ONLYWAY, "What
   happens next", Builder email step, approved testimonials, footer.
   Loaded after styles.css and uses its tokens.
   ===================================================================== */

/* ---------- ONLYSUMMER calculator embed (where the challenge tile was) ---------- */
.band-summer .summer-embed {
  max-width: 760px;
  padding: 18px 12px 10px !important;
}
#summer-frame {
  display: block; width: 100%; height: 980px; border: 0;
  background: transparent; color-scheme: dark;
}
@media (max-width: 720px) {
  .band-summer .summer-embed { padding: 10px 2px 4px !important; margin-left: 8px; margin-right: 8px; }
  #summer-frame { height: 1240px; }
}

/* ---------- The ONLYWAY accordion ---------- */
.band-onlyway { padding: 70px 0 30px; }
.ow-wrap { max-width: 900px; }
.ow-kicker { color: var(--purple); letter-spacing: 0.3em; }
.ow-title { text-transform: uppercase; letter-spacing: -0.02em; }
.ow-list { border-top: 1px solid var(--line); margin-bottom: 34px; }
.ow-row { border-bottom: 1px solid var(--line); }
.ow-h { margin: 0; font: inherit; }
.ow-btn {
  width: 100%; display: flex; align-items: center; gap: 22px;
  padding: 24px 4px; background: none; border: 0; color: var(--white);
  text-align: left; cursor: pointer; font: inherit;
}
.ow-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 8px; }
.ow-num {
  flex: none; width: 1.55em; font-size: clamp(34px, 5vw, 52px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: rgba(245, 245, 243, 0.16);
  font-variant-numeric: tabular-nums;
}
.ow-txt { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ow-name { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.ow-sub { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-dark); font-weight: 600; }
.ow-icon { flex: none; position: relative; width: 18px; height: 18px; }
.ow-icon::before, .ow-icon::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--white); border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.ow-icon::after { transform: rotate(90deg); }
.ow-btn[aria-expanded="true"] .ow-icon::after { transform: rotate(0deg); opacity: 0; }
.ow-btn[aria-expanded="true"] .ow-num { color: var(--purple); }
.ow-btn:hover .ow-num { color: rgba(245, 245, 243, 0.3); }
.ow-panel { padding: 0 4px 26px calc(clamp(34px, 5vw, 52px) * 1.55 + 26px); }
.ow-panel p { margin: 0; color: var(--grey); max-width: 560px; font-size: 15px; line-height: 1.7; }
@media (max-width: 640px) {
  .ow-btn { gap: 14px; padding: 20px 2px; }
  .ow-panel { padding-left: 2px; }
}
@media (prefers-reduced-motion: reduce) { .ow-icon::before, .ow-icon::after { transition: none; } }

/* ---------- apply page: what happens next ---------- */
.next-steps {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 22px 24px; margin: 26px 0 34px;
}
.ns-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--purple); margin-bottom: 14px; }
.ns-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.ns-list li { display: flex; gap: 12px; align-items: flex-start; }
.ns-num { flex: none; font-weight: 700; color: var(--grey-dark); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 2px; }
.ns-list b { display: block; color: var(--white); font-size: 15px; margin-bottom: 2px; }
.ns-list span span, .ns-list li > span:last-child { color: var(--grey); font-size: 14px; line-height: 1.55; }
@media (max-width: 640px) { .ns-list { grid-template-columns: 1fr; } }
.af-opt { color: var(--grey-dark); font-weight: 400; font-size: 0.9em; }
.af-privacy { color: var(--grey-dark); font-size: 12px; margin-top: 14px; }
.af-privacy a { color: var(--grey); }
#apply-form input[type="date"] { color-scheme: dark; min-height: 48px; }

/* ---------- honeypot fields (hidden from people, bots fill them in) ---------- */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Builder email step ---------- */
.wiz-consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0;
  color: var(--grey); font-size: 14px; cursor: pointer; max-width: 480px;
}
.wiz-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--purple); }
.wiz-disclaimer { color: var(--grey-dark); font-size: 12px; line-height: 1.6; margin: 12px 0 0; max-width: 520px; }
.wiz-disclaimer a { color: var(--grey); }
.plan-loading { text-align: center; color: var(--grey); padding: 80px 0; }

/* ---------- approved challenge testimonials ---------- */
.t-card .t-result { font-weight: 700; color: var(--white); font-size: 14px; margin: -6px 0 12px; }
.img-car img.ugc { object-fit: cover; }

/* ---------- footer ---------- */
.foot-privacy { color: var(--grey-dark); text-decoration: none; }
.foot-privacy:hover { color: var(--grey); }
.foot-links a[href="/summer"] { color: var(--white); }

/* ---------- small notice (replaces browser alerts) ---------- */
#oc-notice {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 9999;
  max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--hair); color: var(--white); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
#oc-notice.show { opacity: 1; transform: translate(-50%, 0); }

/* tighter gap between Written Testimonials and THE ONLYWAY */
.band-testimonials .car-viewport:last-child { margin-bottom: 24px; }
.band-onlyway { padding-top: 48px; }
@media (max-width: 860px) {
  .band-testimonials .car-viewport:last-child { margin-bottom: 20px; }
  .band-onlyway { padding-top: 40px; }
}