/* The end-of-step "next step" action, in two versions being tested against each other
   (2026-09-25). Everything here is prefixed .ns- so it can't collide with a step's own styles.

   The problem this replaces: the next step was a plain text link in one white card, sitting
   beside a red "talk to an agent" button in an identical white card. The agent button won the
   page and the way forward was hard to find.

   A = one wide navy bar across the text column.
   B = a bordered card carrying a taste of the next step and the progress pips.

   Nothing else sits at the bottom of a step. The agent offer lives in the middle of the
   page, where the reader hits that question — a second copy down here fought with the way
   forward, which was the whole complaint. Don't put one back.

   Colours and fonts come from each step page's own :root — nothing is redefined here. */

/* No longer inside a numbered step — it is the last thing on the page, so it carries
   its own breathing room from the section above it. */
.nextstep{margin:30px 0 6px}

/* Shown before the script runs, and for anyone whose JavaScript never arrives.
   A working link either way — never a dead end. */
.ns-fallback{display:inline-block;font-weight:800;color:var(--navy);text-decoration:none;font-size:16.5px;
  border-bottom:2px solid var(--red);padding-bottom:2px}

/* ── A · one wide bar ───────────────────────────────────────────────────────── */
.ns-bar{display:flex;align-items:center;gap:18px;background:var(--navy);border-radius:var(--r);
  padding:20px 22px;text-decoration:none;color:#fff}
.ns-bar:hover{background:#00286a}
.ns-bar .ns-t{flex:1 1 auto;min-width:0}
.ns-bar .ns-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#9FB6D8;margin-bottom:3px}
.ns-bar .ns-n{display:block;font-size:clamp(18px,3.2vw,22px);font-weight:800;line-height:1.25}
.ns-bar .ns-go{flex:none;background:var(--red);border-radius:999px;padding:12px 20px;font-weight:800;
  font-size:15.5px;white-space:nowrap}
.ns-bar:hover .ns-go{background:var(--red-deep)}

/* ── B · a card with the progress pips ──────────────────────────────────────── */
.ns-card{display:block;position:relative;background:var(--card);border:2px solid var(--navy);
  border-radius:var(--r);padding:22px;text-decoration:none;color:inherit}
.ns-card:hover{box-shadow:0 10px 26px rgba(1,29,70,.12)}
.ns-card .ns-k{display:block;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kick)}
.ns-card .ns-n{display:block;margin:6px 0 4px;font-family:var(--serif);font-weight:600;
  font-size:clamp(20px,3.6vw,25px);color:var(--navy);line-height:1.2}
.ns-card .ns-p{display:block;color:var(--body);font-size:15px;max-width:52ch}
.ns-card .ns-go{display:inline-block;margin-top:14px;background:var(--red);color:#fff;font-weight:800;
  font-size:16px;border-radius:10px;padding:13px 20px}
.ns-card:hover .ns-go{background:var(--red-deep)}
/* Where the reader is. Square ends, one hairline rail — not a row of equal dashes. */
.ns-prog{position:absolute;right:22px;top:24px;width:118px;text-align:right}
.ns-progl{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kick);margin-bottom:7px;white-space:nowrap}
.ns-rail{display:block;height:3px;background:var(--line)}
.ns-rail i{display:block;height:3px;background:var(--green)}

@media (max-width:560px){
  .ns-bar{flex-direction:column;align-items:stretch;gap:12px}
  .ns-bar .ns-go{text-align:center}
  .ns-prog{position:static;width:auto;text-align:left;margin-bottom:14px}
}

/* Hunter's own check: ?ab=a or ?ab=b puts a small marker on the page and keeps the
   click out of the results. Nobody else ever sees this. */
.ns-preview{margin:10px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--kick)}


/* Step 6 closes the steps, so its way forward is the Enrollment Guide rather
   than another step. Not part of the A/B test — there's no next step to compare. */
.ns-onward{display:flex;align-items:center;gap:14px;margin-top:14px;background:var(--navy);
  border-radius:var(--r);padding:18px 20px;text-decoration:none;color:#fff}
.ns-onward:hover{background:#00286a}
.ns-onward .ns-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#9FB6D8;margin-bottom:3px}
.ns-onward .ns-n{display:block;font-size:clamp(17px,3vw,21px);font-weight:800;line-height:1.25}
.ns-onward .ns-go{flex:none;background:var(--red);border-radius:999px;padding:11px 18px;
  font-weight:800;font-size:15px;white-space:nowrap}
.ns-onward:hover .ns-go{background:var(--red-deep)}
@media (max-width:560px){
  .ns-onward{flex-direction:column;align-items:stretch;gap:12px}
  .ns-onward .ns-go{text-align:center}
}