“God from God, Light from Light.”
You’ve said it a hundred times. Seven lessons on what it cost the church to get that sentence right, and why it still holds.
Seven video lessons from Dallas Theological Seminary, free, on the 1,700th anniversary of the council that wrote it.
Free. Lesson 1 unlocks as soon as you finish.
Someone in your congregation asks whether Jesus was created, or why it matters that the Son is “of one substance” with the Father rather than something merely similar to it.
The creed answers that. Most of us confess it weekly without knowing how.
You’ve said the creed in worship for years and never traced a line of it back to Scripture.
Someone asked what “begotten, not made” actually rules out, and you changed the subject.
You know Arius was wrong. You’re less sure you could say why in two sentences.
You want to teach this, and you don’t want to teach it badly.
Each lesson is a video and a two-question quiz, so you find out whether it landed before you move on.
“I believe in one God, the Father almighty…”
“…begotten, not made, of one substance with the Father.”
“…for us and for our salvation he came down from heaven.”
“…the Lord, the giver of life, who proceeds from the Father.”
“…one holy catholic and apostolic Church.”
“…we look for the resurrection of the dead, and the life of the world to come.”
The whole confession, back together.
Plus additional videos on the creed once you finish.
Darrell Bock, Glenn Kreider, Michael Svigel, and Scott Horrell walk the creed clause by clause. They treat it as a document that was argued into existence by people who thought the answer mattered enough to fight about.
The council met in 325 and settled what the church would say about Jesus. The Nicene Creed is free from Dallas Theological Seminary. Start with Lesson 1.
Start Lesson 1Paste each block into the matching tab in the VWO campaign editor (Variation → Edit Code). The JavaScript moves the existing DTS signup form into this layout rather than rebuilding it, so the platform’s own validation and enrollment keep working.
/* ==========================================================================
VWO Variation — The Nicene Creed landing page treatment
Target: https://courses.dts.edu/courses/nicene-creed
Everything is namespaced under .na-v so it cannot leak into the control.
The live Thinkific form (#registrationForm) is MOVED, not rebuilt — its
markup keeps DTS's own classes and handlers. Rules below only restyle it.
========================================================================== */
@font-face {
font-family: 'NA_Yankee';
src: url('https://cdn.prod.website-files.com/6978d1a0ecdd1e09d6722234/6978d267f6d971808b7ceebd_e2babe42472bee7418a98f21dff772e5_Yankee-Medium.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'NA_Yankee';
src: url('https://cdn.prod.website-files.com/6978d1a0ecdd1e09d6722234/6978d267f6d971808b7ceec2_db07810709e8291d1bd6d54a684baeca_Yankee-SemiBold.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'NA_Yankee';
src: url('https://cdn.prod.website-files.com/6978d1a0ecdd1e09d6722234/6978d267f6d971808b7ceec0_cd3db6cb5cbf0a179d746a7b1fa14dd3_Yankee-Bold.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'NA_Utopia';
src: url('https://cdn.prod.website-files.com/6978d1a0ecdd1e09d6722234/6978d267f6d971808b7ceec1_fff11d696a452642f0f87fd76e169110_UtopiaStd-DispIt.woff2') format('woff2');
font-weight: 400; font-style: italic; font-display: swap;
}
.na-v {
--na-indigo: #383568;
--na-indigo-dk: #2a2850;
--na-indigo-deep: #23214a;
--na-patina: #31261b;
--na-patina-soft: #5c5044;
--na-sandstone: #cea97f;
--na-sandstone-dk:#b8905f;
--na-parchment: #f4efe7;
--na-paper: #fbf8f3;
--na-line: rgba(49,38,27,0.14);
font-family: 'NA_Yankee', system-ui, -apple-system, sans-serif;
color: var(--na-patina);
line-height: 1.55;
background: var(--na-parchment);
-webkit-font-smoothing: antialiased;
}
.na-v *, .na-v *::before, .na-v *::after { box-sizing: border-box; }
.na-v p, .na-v h1, .na-v h2, .na-v h3, .na-v ol, .na-v li { margin: 0; padding: 0; }
.na-v ol { list-style: none; }
/* Hide the control's own sections while the variation is mounted. */
body.na-active #main-content > section,
body.na-active .text-image__container,
body.na-active .description__container { display: none !important; }
body.na-active .na-v { display: block !important; }
/* ============ HERO ============ */
.na-v .na-hero {
position: relative;
background:
linear-gradient(140deg, rgba(35,33,74,0.93) 0%, rgba(56,53,104,0.88) 55%, rgba(56,53,104,0.72) 100%),
url('https://images.unsplash.com/photo-1544427920-c49ccfb85579?auto=format&fit=crop&w=2000&q=80');
background-size: cover;
background-position: center;
color: #fff;
padding: 92px 40px 96px;
}
.na-v .na-hero-grid {
max-width: 1240px; margin: 0 auto;
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: 72px; align-items: center;
}
.na-v .na-hero h1 {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic; font-weight: 400;
font-size: clamp(44px, 5.6vw, 82px); line-height: 1.02;
letter-spacing: -0.015em; margin-bottom: 22px; color: #fff;
}
.na-v .na-kicker {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic;
font-size: clamp(19px, 2.1vw, 26px); line-height: 1.35;
color: var(--na-sandstone); margin-bottom: 20px;
}
.na-v .na-sub {
font-size: 19px; line-height: 1.55;
color: rgba(255,255,255,0.9); max-width: 520px; margin-bottom: 34px;
}
.na-v .na-facts {
font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72);
max-width: 470px; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.2);
}
/* ============ FORM SHELL (wraps the real #registrationForm) ============ */
.na-v .na-form-card {
background: var(--na-paper); color: var(--na-patina);
padding: 42px 38px; border-radius: 3px;
box-shadow: 0 30px 80px rgba(20,16,40,0.42);
}
.na-v .na-form-card h2 {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic;
font-size: 29px; font-weight: 400; line-height: 1.15;
margin-bottom: 7px; color: var(--na-patina);
}
.na-v .na-form-lead {
color: var(--na-patina-soft); font-size: 15px; margin-bottom: 24px;
}
.na-v .na-form-note {
font-size: 12px; color: var(--na-patina-soft);
margin-top: 6px; line-height: 1.45;
}
.na-v .na-form-foot {
font-size: 12px; color: var(--na-patina-soft);
margin-top: 14px; line-height: 1.5;
}
/* Restyle the transplanted Thinkific form in place. */
.na-v #registrationForm .form-field { margin-bottom: 13px; }
.na-v #registrationForm .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.na-v #registrationForm label {
display: block; font-size: 11px; font-weight: 700;
letter-spacing: 0.09em; text-transform: uppercase;
color: var(--na-patina-soft); margin-bottom: 6px;
}
.na-v #registrationForm label.error {
text-transform: none; letter-spacing: 0; font-weight: 400;
font-size: 12px; color: #ad5449; margin-top: 5px;
}
.na-v #registrationForm input[type="text"],
.na-v #registrationForm input[type="email"],
.na-v #registrationForm input[type="password"] {
width: 100%; padding: 13px 15px;
border: 1px solid var(--na-line); background: #fff; border-radius: 2px;
font-size: 16px; font-family: inherit; color: var(--na-patina);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
-webkit-appearance: none; appearance: none;
}
.na-v #registrationForm input:focus {
outline: none; border-color: var(--na-indigo);
box-shadow: 0 0 0 3px rgba(56,53,104,0.14);
}
.na-v #registrationForm .submit-button,
.na-v #registrationForm button[type="submit"] {
width: 100%; background: var(--na-indigo); color: #fff; border: none;
padding: 17px 24px; border-radius: 2px;
font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; font-family: inherit; cursor: pointer;
margin-top: 18px; transition: background 0.2s ease, transform 0.2s ease;
display: flex; align-items: center; justify-content: center; gap: 10px;
}
/* DTS's own error/welcome messages are display:none until their JS
reveals them. Never force them visible — just style them when shown. */
.na-v #registrationForm #welcomeMessage p {
font-size: 15px; color: var(--na-patina-soft); margin-top: 4px;
}
.na-v #registrationForm .submit-button:hover,
.na-v #registrationForm button[type="submit"]:hover {
background: var(--na-indigo-dk); transform: translateY(-1px);
}
.na-v #registrationForm .submit-button:focus-visible,
.na-v #registrationForm button[type="submit"]:focus-visible {
outline: 3px solid var(--na-sandstone); outline-offset: 2px;
}
/* ============ CREED BAND ============ */
.na-v .na-creed-bar {
background: var(--na-indigo-deep); color: #fff;
padding: 44px 40px; text-align: center;
}
.na-v .na-creed-bar p {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic;
font-size: clamp(20px, 2.3vw, 27px); max-width: 800px;
margin: 0 auto; line-height: 1.45; color: rgba(255,255,255,0.94);
}
.na-v .na-creed-bar cite {
display: block; margin-top: 15px; font-style: normal;
font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--na-sandstone); font-weight: 600;
}
/* ============ SECTIONS ============ */
.na-v .na-section { max-width: 1100px; margin: 0 auto; padding: 96px 40px; }
.na-v .na-section h2,
.na-v .na-for-you h2,
.na-v .na-lessons h2,
.na-v .na-instructor h2 {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic; font-weight: 400;
font-size: clamp(34px, 4.3vw, 54px); line-height: 1.06;
letter-spacing: -0.015em; margin-bottom: 24px; color: var(--na-indigo);
}
.na-v .na-lead {
font-size: 19px; color: var(--na-patina-soft); line-height: 1.62; max-width: 660px;
}
.na-v .na-lead + .na-lead { margin-top: 16px; }
/* ============ WHO IT'S FOR ============ */
.na-v .na-for-you {
background: var(--na-paper); padding: 92px 40px;
border-top: 1px solid var(--na-line); border-bottom: 1px solid var(--na-line);
}
.na-v .na-for-you-inner { max-width: 1100px; margin: 0 auto; }
.na-v .na-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px; background: var(--na-line);
border: 1px solid var(--na-line); margin-top: 44px;
}
.na-v .na-grid-item { background: var(--na-paper); padding: 34px 30px; }
.na-v .na-grid-item p {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic;
font-size: 20px; line-height: 1.4; color: var(--na-indigo);
}
/* ============ LESSONS ============ */
.na-v .na-lessons {
background: var(--na-indigo); color: #fff; padding: 96px 40px;
}
.na-v .na-lessons-inner { max-width: 1100px; margin: 0 auto; }
.na-v .na-lessons h2 { color: #fff; }
.na-v .na-lessons-intro {
font-size: 18px; color: rgba(255,255,255,0.78);
line-height: 1.6; max-width: 560px; margin-top: 20px;
}
.na-v .na-lesson-list { margin-top: 48px; border-top: 1px solid rgba(255,255,255,0.16); }
.na-v .na-lesson {
display: grid; grid-template-columns: 52px 1fr; gap: 20px;
align-items: baseline; padding: 26px 4px;
border-bottom: 1px solid rgba(255,255,255,0.16);
}
.na-v .na-lesson-num {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic;
font-size: 30px; color: var(--na-sandstone); line-height: 1;
}
.na-v .na-lesson h3 {
font-size: 21px; font-weight: 600; line-height: 1.25;
margin-bottom: 6px; color: #fff;
}
.na-v .na-lesson .na-creed-line {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic;
color: rgba(255,255,255,0.62); font-size: 16px;
}
.na-v .na-lessons-note {
font-size: 15px; color: rgba(255,255,255,0.62); margin-top: 26px;
}
/* ============ INSTRUCTORS ============ */
.na-v .na-instructor { background: var(--na-parchment); padding: 96px 40px; }
.na-v .na-instructor-inner { max-width: 900px; margin: 0 auto; }
.na-v .na-bio {
font-size: 18px; color: var(--na-patina-soft);
line-height: 1.65; margin-bottom: 16px; max-width: 700px;
}
.na-v .na-names {
display: flex; flex-wrap: wrap; gap: 0 28px;
margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--na-line);
}
.na-v .na-names span {
font-weight: 600; font-size: 15px; color: var(--na-indigo); padding: 6px 0;
}
/* ============ CLOSING CTA ============ */
.na-v .na-final {
background:
linear-gradient(140deg, rgba(35,33,74,0.92), rgba(56,53,104,0.85)),
url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=2000&q=80');
background-size: cover; background-position: center;
color: #fff; padding: 104px 40px; text-align: center;
}
.na-v .na-final-inner { max-width: 720px; margin: 0 auto; }
.na-v .na-final h2 {
font-family: 'NA_Utopia', Georgia, serif; font-style: italic; font-weight: 400;
font-size: clamp(34px, 4.8vw, 58px); line-height: 1.06;
letter-spacing: -0.015em; margin-bottom: 22px; color: #fff;
}
.na-v .na-final h2 .na-light { color: var(--na-sandstone); }
.na-v .na-final p {
font-size: 19px; color: rgba(255,255,255,0.88); margin-bottom: 38px;
}
.na-v .na-final-btn {
display: inline-block; background: var(--na-sandstone); color: var(--na-patina);
padding: 17px 34px; border-radius: 2px;
font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.na-v .na-final-btn:hover {
background: var(--na-sandstone-dk); color: var(--na-patina); transform: translateY(-1px);
}
.na-v .na-final-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* ============ STICKY MOBILE CTA ============ */
.na-v .na-mobile-cta { display: none; }
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
.na-v .na-hero { padding: 64px 22px 64px; }
.na-v .na-hero-grid { grid-template-columns: 1fr; gap: 44px; }
.na-v .na-section,
.na-v .na-for-you,
.na-v .na-lessons,
.na-v .na-instructor,
.na-v .na-final,
.na-v .na-creed-bar { padding-left: 22px; padding-right: 22px; }
.na-v .na-section,
.na-v .na-for-you,
.na-v .na-lessons,
.na-v .na-instructor,
.na-v .na-final { padding-top: 72px; padding-bottom: 72px; }
.na-v .na-form-card { padding: 34px 24px; }
.na-v #registrationForm .form-row { grid-template-columns: 1fr; gap: 0; }
.na-v .na-lesson { grid-template-columns: 38px 1fr; gap: 14px; padding: 22px 2px; }
.na-v .na-lesson-num { font-size: 24px; }
.na-v .na-lesson h3 { font-size: 19px; }
.na-v .na-mobile-cta {
display: block; position: fixed; bottom: 0; left: 0; right: 0;
background: var(--na-paper); padding: 13px 18px;
box-shadow: 0 -8px 24px rgba(20,16,40,0.16);
z-index: 999999; border-top: 1px solid var(--na-line);
}
.na-v .na-mobile-cta a {
display: block; background: var(--na-indigo); color: #fff;
text-align: center; padding: 14px; border-radius: 2px;
font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
font-size: 13px; text-decoration: none;
}
body.na-active { padding-bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
.na-v *, .na-v *::before, .na-v *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
.na-v .na-final-btn:hover,
.na-v #registrationForm button[type="submit"]:hover { transform: none; }
}
/* ==========================================================================
VWO Variation JS — The Nicene Creed landing page treatment
Target: https://courses.dts.edu/courses/nicene-creed
KEY BEHAVIOUR: the live Thinkific form (#registrationForm) is MOVED into
the new layout with appendChild. Moving a node preserves its event
listeners, so DTS's own validation and enrollment submit keep working.
The form is never cloned (clones drop listeners) and never rebuilt.
Paste into VWO: Variation → Edit Code → JavaScript.
Paste variation.css into the CSS tab.
========================================================================== */
(function () {
'use strict';
var MOUNTED = 'na-nicene-v1';
if (document.getElementById(MOUNTED)) return; // never mount twice
var LESSONS = [
['The Doctrine of God', '“I believe in one God, the Father almighty…”'],
['The Person of Jesus', '“…begotten, not made, of one substance with the Father.”'],
['The Work of Jesus', '“…for us and for our salvation he came down from heaven.”'],
['The Work of the Holy Spirit', '“…the Lord, the giver of life, who proceeds from the Father.”'],
['The Church', '“…one holy catholic and apostolic Church.”'],
['Eschatology', '“…we look for the resurrection of the dead, and the life of the world to come.”'],
['Understanding the Nicene Creed', 'The whole confession, back together.']
];
var FAMILIAR = [
'You’ve said the creed in worship for years and never traced a line of it back to Scripture.',
'Someone asked what “begotten, not made” actually rules out, and you changed the subject.',
'You know Arius was wrong. You’re less sure you could say why in two sentences.',
'You want to teach this, and you don’t want to teach it badly.'
];
/* ---------- tiny DOM helper ---------- */
function el(tag, cls, text) {
var n = document.createElement(tag);
if (cls) n.className = cls;
if (text != null) n.textContent = text; // textContent = no injection risk
return n;
}
function waitFor(check, onReady, timeoutMs) {
var found = check();
if (found) { onReady(found); return; }
var stop = false;
var timer = setTimeout(function () {
stop = true;
if (obs) obs.disconnect();
}, timeoutMs || 8000);
var obs = new MutationObserver(function () {
if (stop) return;
var f = check();
if (f) {
clearTimeout(timer);
obs.disconnect();
onReady(f);
}
});
obs.observe(document.documentElement, { childList: true, subtree: true });
}
/* ---------- build the variation shell ---------- */
function build(form) {
var root = el('div', 'na-v');
root.id = MOUNTED;
/* ---- HERO ---- */
var hero = el('section', 'na-hero');
var grid = el('div', 'na-hero-grid');
var left = el('div');
left.appendChild(el('h1', null, 'The Nicene Creed'));
left.appendChild(el('p', 'na-kicker', '“God from God, Light from Light.”'));
left.appendChild(el('p', 'na-sub',
'You’ve said it a hundred times. Seven lessons on what it cost the church to get that sentence right, and why it still holds.'));
left.appendChild(el('p', 'na-facts',
'Seven video lessons from Dallas Theological Seminary, free, on the 1,700th anniversary of the council that wrote it.'));
/* ---- FORM CARD: wraps the REAL form node ---- */
var card = el('div', 'na-form-card');
card.id = 'na-signup';
card.appendChild(el('h2', null, 'Enroll in The Nicene Creed'));
card.appendChild(el('p', 'na-form-lead', 'Free. Lesson 1 unlocks as soon as you finish.'));
// Remember where the form came from so we can put it back on unmount.
var placeholder = el('span');
placeholder.id = 'na-form-anchor';
placeholder.style.display = 'none';
form.parentNode.insertBefore(placeholder, form);
// MOVE (not clone) — preserves DTS's listeners and validation.
card.appendChild(form);
var note = el('p', 'na-form-note',
'At least 6 characters. This creates your DTS account, so the course remembers where you stopped between lessons.');
var pwField = form.querySelector('#passwordField');
if (pwField) pwField.appendChild(note);
card.appendChild(el('p', 'na-form-foot',
'Free course from Dallas Theological Seminary. Unsubscribe anytime.'));
grid.appendChild(left);
grid.appendChild(card);
hero.appendChild(grid);
root.appendChild(hero);
/* ---- CREED BAND ---- */
var band = el('section', 'na-creed-bar');
band.appendChild(el('p', null,
'“…begotten, not made, of one substance with the Father, through whom all things were made.”'));
band.appendChild(el('cite', null, '— The Nicene Creed, 325'));
root.appendChild(band);
/* ---- PREMISE ---- */
var premise = el('section', 'na-section');
premise.appendChild(el('h2', null, 'You can recite it. Can you defend it?'));
premise.appendChild(el('p', 'na-lead',
'Someone in your congregation asks whether Jesus was created, or why it matters that the Son is “of one substance” with the Father rather than something merely similar to it.'));
premise.appendChild(el('p', 'na-lead',
'The creed answers that. Most of us confess it weekly without knowing how.'));
root.appendChild(premise);
/* ---- WHO IT'S FOR ---- */
var forYou = el('section', 'na-for-you');
var forInner = el('div', 'na-for-you-inner');
forInner.appendChild(el('h2', null, 'If any of this sounds familiar.'));
var fGrid = el('div', 'na-grid');
FAMILIAR.forEach(function (t) {
var item = el('div', 'na-grid-item');
item.appendChild(el('p', null, t));
fGrid.appendChild(item);
});
forInner.appendChild(fGrid);
forYou.appendChild(forInner);
root.appendChild(forYou);
/* ---- LESSONS ---- */
var lessons = el('section', 'na-lessons');
var lInner = el('div', 'na-lessons-inner');
lInner.appendChild(el('h2', null, 'Seven lessons, clause by clause.'));
lInner.appendChild(el('p', 'na-lessons-intro',
'Each lesson is a video and a two-question quiz, so you find out whether it landed before you move on.'));
var ol = el('ol', 'na-lesson-list');
LESSONS.forEach(function (pair, i) {
var li = el('li', 'na-lesson');
li.appendChild(el('span', 'na-lesson-num', String(i + 1)));
var body = el('div');
body.appendChild(el('h3', null, pair[0]));
body.appendChild(el('p', 'na-creed-line', pair[1]));
li.appendChild(body);
ol.appendChild(li);
});
lInner.appendChild(ol);
lInner.appendChild(el('p', 'na-lessons-note',
'Plus additional videos on the creed once you finish.'));
lessons.appendChild(lInner);
root.appendChild(lessons);
/* ---- INSTRUCTORS ---- */
var inst = el('section', 'na-instructor');
var iInner = el('div', 'na-instructor-inner');
iInner.appendChild(el('h2', null, 'Taught by four DTS scholars.'));
iInner.appendChild(el('p', 'na-bio',
'Darrell Bock, Glenn Kreider, Michael Svigel, and Scott Horrell walk the creed clause by clause. They treat it as a document that was argued into existence by people who thought the answer mattered enough to fight about.'));
var names = el('div', 'na-names');
['Darrell Bock', 'Glenn Kreider', 'Michael Svigel', 'Scott Horrell'].forEach(function (n) {
names.appendChild(el('span', null, n));
});
iInner.appendChild(names);
inst.appendChild(iInner);
root.appendChild(inst);
/* ---- CLOSING CTA ---- */
var final = el('section', 'na-final');
var fInner = el('div', 'na-final-inner');
var h2 = el('h2', null, 'Seventeen hundred years, ');
var light = el('span', 'na-light', 'seven lessons.');
h2.appendChild(light);
fInner.appendChild(h2);
fInner.appendChild(el('p', null,
'The council met in 325 and settled what the church would say about Jesus. The Nicene Creed is free from Dallas Theological Seminary. Start with Lesson 1.'));
var cta = el('a', 'na-final-btn', 'Start Lesson 1');
cta.href = '#na-signup';
fInner.appendChild(cta);
final.appendChild(fInner);
root.appendChild(final);
/* ---- MOBILE STICKY ---- */
var sticky = el('div', 'na-mobile-cta');
var sLink = el('a', null, 'Start Lesson 1 →');
sLink.href = '#na-signup';
sticky.appendChild(sLink);
root.appendChild(sticky);
return root;
}
/* ---------- scroll: focus the real email input ---------- */
function wireScroll(root) {
root.addEventListener('click', function (e) {
var a = e.target.closest ? e.target.closest('a[href="#na-signup"]') : null;
if (!a) return;
e.preventDefault();
var card = document.getElementById('na-signup');
if (!card) return;
card.scrollIntoView({
behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
block: 'center'
});
var email = card.querySelector('#email');
if (email) setTimeout(function () { email.focus({ preventScroll: true }); }, 420);
});
}
/* ---------- mount ---------- */
function mount(form) {
if (document.getElementById(MOUNTED)) return;
var main = document.getElementById('main-content') || document.body;
var root = build(form);
main.parentNode.insertBefore(root, main);
document.body.classList.add('na-active');
wireScroll(root);
// Relabel the submit button. The live button is:
// <button type="submit" class="submit-button" id="submit">
// Access your free course now <span class="loader" id="loading_spinner"></span>
// </button>
// Only the leading text node is rewritten — the loader span must survive,
// or DTS's submit spinner breaks. Kept last so a failure here cannot
// interrupt mounting.
try {
var btn = form.querySelector('#submit, button[type="submit"], .submit-button');
if (btn) {
var replaced = false;
for (var i = 0; i < btn.childNodes.length; i++) {
var node = btn.childNodes[i];
if (node.nodeType === 3 && node.nodeValue.trim()) {
node.nodeValue = 'Start Lesson 1 ';
replaced = true;
break;
}
}
if (!replaced) btn.insertBefore(document.createTextNode('Start Lesson 1 '), btn.firstChild);
}
} catch (err) {}
}
waitFor(function () { return document.getElementById('registrationForm'); }, mount, 10000);
})();