<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The wRight Analysis — Stephanie Wright</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--teal: #7AA5A5;
--teal-dark: #5F8A8A;
--teal-soft: #E8F0F0;
--mauve: #B08AB5;
--mauve-dark: #8F6B94;
--mauve-soft: #F1E8F2;
--navy: #2C3E5A;
--navy-dark: #1E2D44;
--ink: #2C3E5A;
--ink-soft: #4A5B76;
--muted: #7A8598;
--line: #E2E5EA;
--line-soft: #F0F2F5;
--bg: #F8F9FB;
--card: #FFFFFF;
--warn: #B86E28;
--warn-bg: #FCF2E4;
--error: #B03A48;
--error-bg: #F8E4E7;
--success: #4A8373;
--success-bg: #E6EFEB;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* ========== WORDPRESS ESCAPE ==========
This wrapper breaks out of WordPress's narrow content column and
fills the full browser viewport width. Works inside any theme. */
.wright-app-wrap {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Archivo', 'Inter', sans-serif;
font-weight: 800;
letter-spacing: -0.015em;
margin: 0;
line-height: 1.1;
color: var(--navy);
}
.brand-highlight {
background: var(--mauve);
color: white;
padding: 2px 16px 4px 16px;
display: inline-block;
font-weight: 800;
border-radius: 2px;
letter-spacing: -0.01em;
}
.r-accent {
color: var(--mauve-dark);
font-weight: 800;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--ink); }
/* ========== INTRO / WELCOME SCREEN ========== */
.intro-screen {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background:
linear-gradient(135deg, #FFFFFF 0%, var(--teal-soft) 100%),
repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(176,138,181,0.03) 40px, rgba(176,138,181,0.03) 80px);
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.intro-screen::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: var(--mauve-soft);
opacity: 0.4;
transform: rotate(20deg);
border-radius: 8px;
}
.intro-screen::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 220px;
height: 220px;
background: var(--teal-soft);
opacity: 0.6;
transform: rotate(-15deg);
border-radius: 8px;
}
.intro-card {
max-width: 560px;
width: 100%;
background: white;
border-radius: 4px;
padding: 56px 48px;
box-shadow: 0 20px 60px rgba(44,62,90,0.12);
border-top: 4px solid var(--teal);
position: relative;
z-index: 1;
}
.intro-card .eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mauve-dark);
margin-bottom: 16px;
}
.intro-card h1 {
font-size: 42px;
margin-bottom: 18px;
line-height: 1.05;
}
.intro-card .lead-headline {
font-family: 'Archivo', sans-serif;
font-size: 26px;
font-weight: 600;
line-height: 1.2;
color: var(--navy);
margin-bottom: 20px;
letter-spacing: -0.01em;
}
.intro-card p.lead {
font-size: 15px;
color: var(--ink-soft);
margin: 0 0 32px 0;
}
.intro-choice {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 28px;
}
.intro-choice button {
padding: 14px 12px;
border: 1.5px solid var(--line);
background: white;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
color: var(--ink);
transition: all 0.15s ease;
}
.intro-choice button:hover { border-color: var(--teal); color: var(--teal); }
.intro-choice button.active {
border-color: var(--teal);
background: var(--teal);
color: white;
}
.field { margin-bottom: 18px; }
.field label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
color: var(--ink);
}
.field .req { color: var(--mauve-dark); margin-left: 3px; font-weight: 700; }
.field .help {
font-size: 12px;
color: var(--muted);
margin-top: 5px;
line-height: 1.4;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="url"],
.field input[type="date"],
.field select,
.field textarea {
width: 100%;
padding: 11px 13px;
border: 1.5px solid var(--line);
border-radius: 3px;
background: white;
transition: border-color 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--teal);
}
.field textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.field input.err, .field select.err, .field textarea.err { border-color: var(--error); }
.field .err-msg { color: var(--error); font-size: 12px; margin-top: 5px; display: none; }
.field .err-msg.show { display: block; }
.btn-primary {
background: var(--teal);
color: white;
border: none;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
border-radius: 3px;
transition: background 0.15s;
letter-spacing: 0.01em;
}
.btn-primary:hover:not(:disabled) { background: var(--teal-dark); }
.btn-primary:disabled { background: #D8D8D8; cursor: not-allowed; }
.btn-outline {
background: white;
color: var(--ink);
border: 1.5px solid var(--line);
padding: 12px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 3px;
transition: all 0.15s;
}
.btn-outline:hover { border-color: var(--ink); }
.btn-link {
background: none;
border: none;
color: var(--teal);
font-weight: 600;
font-size: 14px;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ========== RESUME PANEL ========== */
.resume-panel {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.resume-panel h3 {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
}
.resume-row { display: flex; gap: 10px; }
.resume-row input { flex: 1; }
/* ========== MAIN APP LAYOUT ========== */
.app-shell {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
width: 100%;
}
.sidebar {
background: white;
border-right: 1px solid var(--line);
padding: 28px 0;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar-head {
padding: 0 24px 20px 24px;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 16px;
}
.sidebar-head .brand {
font-family: 'Archivo Narrow', 'Archivo', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1;
letter-spacing: 0.02em;
color: var(--navy);
text-transform: uppercase;
}
.sidebar-head .brand-accent {
font-weight: 500;
color: var(--navy);
opacity: 0.85;
margin-left: 2px;
}
.sidebar-head .sub {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-top: 6px;
}
.client-logo {
margin-top: 14px;
padding: 10px;
background: var(--bg);
border-radius: 3px;
text-align: center;
display: none;
}
.client-logo.show { display: block; }
.client-logo img { max-width: 100%; max-height: 50px; display: block; margin: 0 auto; }
.client-logo .client-name {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
font-weight: 600;
}
.section-nav { list-style: none; padding: 0; margin: 0; }
.section-nav li {
padding: 10px 24px;
font-size: 13.5px;
color: var(--ink-soft);
cursor: default;
display: flex;
align-items: center;
gap: 10px;
border-left: 3px solid transparent;
font-weight: 500;
transition: all 0.15s;
}
.section-nav li.active {
color: var(--teal);
border-left-color: var(--teal);
background: var(--teal-soft);
font-weight: 600;
}
.section-nav li.completed { color: var(--success); }
.section-nav li.available { cursor: pointer; }
.section-nav li.available:hover { color: var(--ink); background: var(--line-soft); }
.section-nav .num {
display: inline-flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--line-soft);
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.section-nav li.active .num { background: var(--teal); color: white; }
.section-nav li.completed .num { background: var(--success); color: white; }
/* ========== MAIN CONTENT ========== */
.main {
padding: 0;
max-width: 100%;
overflow-x: hidden;
}
.topbar {
background: white;
border-bottom: 1px solid var(--line);
padding: 18px 56px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 10;
}
@media (min-width: 1600px) {
.topbar { padding: 20px 80px; }
}
.progress-track {
flex: 1;
max-width: 460px;
margin-right: 24px;
}
.progress-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.progress-bar {
height: 5px;
background: var(--line-soft);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--teal);
transition: width 0.3s;
}
.user-chip {
font-size: 13px;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 10px;
}
.user-chip .chip-name { font-weight: 600; color: var(--ink); }
.user-chip .chip-code {
background: var(--bg);
padding: 4px 10px;
border-radius: 3px;
font-family: 'SF Mono', Menlo, monospace;
font-size: 11px;
color: var(--muted);
letter-spacing: 0.03em;
}
.content {
padding: 40px 56px 120px 56px;
max-width: 1400px;
margin: 0;
}
@media (min-width: 1600px) {
.content { padding: 48px 80px 120px 80px; }
}
.section-header {
margin-bottom: 36px;
max-width: 1100px;
}
.section-header .eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mauve-dark);
margin-bottom: 10px;
}
.section-header h1 {
font-size: 40px;
line-height: 1.05;
margin-bottom: 12px;
}
.section-header .section-desc {
font-size: 15px;
color: var(--ink-soft);
max-width: 640px;
}
.block {
background: var(--card);
border: 1px solid var(--line);
border-radius: 4px;
padding: 32px;
margin-bottom: 24px;
}
.block-title {
font-family: 'Archivo', 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
}
.block-sub {
font-size: 13px;
color: var(--muted);
margin-bottom: 24px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.block { max-width: 1100px; }
.grid-span-2 { grid-column: span 2; }
@media (max-width: 768px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.grid-span-2 { grid-column: span 1; }
}
/* Owner cards */
.owner-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 4px;
padding: 24px;
margin-bottom: 16px;
position: relative;
}
.owner-card .owner-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.owner-card .owner-label {
font-family: 'Archivo', 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mauve-dark);
}
.ownership-total {
padding: 14px 16px;
border-radius: 3px;
margin-top: 12px;
font-size: 14px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.ownership-total.ok { background: var(--success-bg); color: var(--success); }
.ownership-total.warn { background: var(--warn-bg); color: var(--warn); }
/* Logo upload */
.logo-upload {
border: 2px dashed var(--line);
border-radius: 4px;
padding: 24px;
text-align: center;
transition: border-color 0.15s;
cursor: pointer;
}
.logo-upload:hover { border-color: var(--teal); }
.logo-upload.has-logo { border-style: solid; padding: 14px; }
.logo-upload input[type="file"] { display: none; }
.logo-upload .upload-icon { font-size: 24px; color: var(--muted); }
.logo-upload .upload-text { font-size: 13px; color: var(--muted); margin-top: 4px; }
.logo-preview { max-width: 180px; max-height: 80px; margin: 0 auto; display: block; }
/* Operatory reconciliation */
.op-recon {
display: flex;
justify-content: space-between;
padding: 12px 16px;
border-radius: 3px;
margin-top: 10px;
font-size: 13px;
font-weight: 600;
}
.op-recon.ok { background: var(--success-bg); color: var(--success); }
.op-recon.err { background: var(--error-bg); color: var(--error); }
/* Footer action bar */
.action-bar {
position: fixed;
bottom: 0;
left: 280px;
right: 0;
background: white;
border-top: 1px solid var(--line);
padding: 16px 56px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
z-index: 10;
}
@media (min-width: 1600px) {
.action-bar { padding: 18px 80px; }
}
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; }
.sidebar { position: relative; height: auto; }
.action-bar { left: 0; padding: 16px 24px; }
.content { padding: 28px 24px 160px 24px; }
.topbar { padding: 16px 24px; }
}
/* Modal */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(26,26,26,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: 20px;
}
.modal-backdrop.show { display: flex; }
.modal {
background: white;
border-radius: 4px;
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 40px;
border-top: 4px solid var(--teal);
}
.modal h2 {
font-size: 26px;
margin-bottom: 8px;
}
.modal .modal-sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.email-preview {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 3px;
padding: 20px;
margin-bottom: 20px;
font-size: 13px;
}
.email-preview .ep-head {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.email-preview .ep-meta { color: var(--muted); margin-bottom: 10px; font-size: 12px; }
.email-preview .ep-body { color: var(--ink-soft); line-height: 1.6; }
.resume-code-box {
background: var(--teal-soft);
border: 2px solid var(--teal);
border-radius: 3px;
padding: 18px;
text-align: center;
margin: 20px 0;
}
.resume-code-box .code {
font-family: 'SF Mono', Menlo, monospace;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--teal-dark);
}
.resume-code-box .code-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-dark);
margin-bottom: 6px;
}
.ack-box {
background: var(--warn-bg);
border-left: 3px solid var(--warn);
padding: 16px;
border-radius: 3px;
margin-bottom: 20px;
}
.ack-box .ack-title { font-weight: 700; color: var(--warn); margin-bottom: 8px; font-size: 14px; }
.ack-box .ack-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
/* Completion / success banner */
.save-confirm {
position: fixed;
top: 20px;
right: 20px;
background: var(--success);
color: white;
padding: 12px 20px;
border-radius: 3px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
display: none;
z-index: 200;
animation: slideIn 0.3s ease;
}
.save-confirm.show { display: block; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.hide { display: none !important; }
/* ========== SECTION 2: PROMPTED QUESTIONS ========== */
.intro-callout {
background: linear-gradient(135deg, #FFFFFF 0%, var(--mauve-soft) 100%);
border-left: 4px solid var(--mauve);
padding: 28px 32px;
margin-bottom: 32px;
border-radius: 2px;
}
.intro-callout .callout-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mauve-dark);
margin-bottom: 10px;
}
.intro-callout p {
font-size: 15px;
color: var(--ink);
line-height: 1.65;
margin: 0 0 12px 0;
}
.intro-callout p:last-child { margin-bottom: 0; }
.intro-callout strong { color: var(--mauve-dark); }
.block-category-head {
display: flex;
align-items: baseline;
gap: 14px;
margin: 8px 0 20px 0;
}
.block-category-head .cat-num {
font-family: 'Archivo', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal-dark);
padding: 4px 12px;
background: var(--teal-soft);
border-radius: 2px;
}
.prompt-q {
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px dashed var(--line);
}
.prompt-q:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.prompt-q-num {
font-family: 'Archivo', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--mauve-dark);
margin-bottom: 4px;
}
.prompt-q-label {
font-family: 'Archivo', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--navy);
margin-bottom: 12px;
letter-spacing: -0.005em;
}
.prompt-q-story {
font-size: 14px;
color: var(--ink-soft);
font-style: italic;
line-height: 1.55;
margin-bottom: 14px;
padding: 14px 18px;
background: var(--bg);
border-left: 3px solid var(--teal);
border-radius: 0 2px 2px 0;
}
.prompt-q-story::before {
content: '— Stephanie';
display: block;
font-size: 10px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-dark);
margin-bottom: 6px;
}
.prompt-q textarea {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--line);
border-radius: 3px;
background: white;
font-family: inherit;
font-size: 15px;
resize: vertical;
min-height: 80px;
transition: border-color 0.15s, background 0.2s;
}
.prompt-q textarea:focus { outline: none; border-color: var(--teal); }
.prompt-q textarea.skipped {
background: var(--line-soft);
color: var(--muted);
font-style: italic;
pointer-events: none;
}
.prompt-q-skip {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
font-size: 13px;
color: var(--muted);
cursor: pointer;
user-select: none;
}
.prompt-q-skip input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--mauve);
cursor: pointer;
}
.prompt-q-skip:hover { color: var(--mauve-dark); }
.progress-counter {
position: sticky;
bottom: 92px;
background: white;
border: 1px solid var(--line);
border-radius: 3px;
padding: 12px 18px;
margin-top: 32px;
font-size: 13px;
color: var(--ink-soft);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.progress-counter .counter-num {
font-family: 'Archivo', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--teal-dark);
}
.progress-counter .counter-note {
font-style: italic;
color: var(--muted);
font-size: 12px;
}
/* dropdown styling for exit timeline */
.prompt-q select {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--line);
border-radius: 3px;
background: white;
font-size: 15px;
max-width: 360px;
}
.prompt-q select:focus { outline: none; border-color: var(--teal); }
.prompt-q input[type="text"],
.prompt-q input[type="number"] {
width: 100%;
padding: 10px 13px;
border: 1.5px solid var(--line);
border-radius: 3px;
font-size: 14px;
max-width: 480px;
}
.prompt-q input[type="text"]:focus,
.prompt-q input[type="number"]:focus {
outline: none;
border-color: var(--teal);
}
/* Checkbox grid for multi-select questions */
.checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
margin-top: 8px;
}
@media (max-width: 700px) {
.checkbox-grid { grid-template-columns: 1fr; }
}
.cbx {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1.5px solid var(--line);
border-radius: 3px;
cursor: pointer;
font-size: 14px;
color: var(--navy);
background: white;
transition: all 0.15s;
user-select: none;
}
.cbx:hover { border-color: var(--teal); background: var(--teal-soft); }
.cbx input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--teal);
cursor: pointer;
margin: 0;
flex-shrink: 0;
}
.cbx:has(input:checked) {
border-color: var(--teal);
background: var(--teal-soft);
font-weight: 600;
}
</style>
</head>
<body>
<div class="wright-app-wrap">
<!-- ============ WELCOME / INTRO SCREEN ============ -->
<div id="intro" class="intro-screen">
<div class="intro-card">
<div class="eyebrow">Stephanie Wright · The w<span class="r-accent">R</span>ight Analysis</div>
<h1><span class="brand-highlight">Welcome!</span></h1>
<div class="lead-headline">Let's see what your practice is really capable of.</div>
<p class="lead">The <strong>w<span class="r-accent">R</span>ight Analysis</strong> is a comprehensive look at your practice — operations, financials, team, and growth opportunities. It takes about 60–90 minutes. You can save your progress at any point and return later using a unique resume code.</p>
<p class="lead" style="font-weight: 600; color: var(--mauve-dark); margin-bottom: 32px;">No judgment. I've seen it all. And I share real stories along the way.</p>
<div id="introStart">
<div class="intro-choice">
<button id="btnNew" class="active">Start a New Analysis</button>
<button id="btnResume">Resume Analysis</button>
</div>
<div id="newPanel">
<div class="field">
<label>Your full name <span class="req">*</span></label>
<input type="text" id="introName" placeholder="Jane Smith" />
<div class="err-msg" id="err-introName">Please enter your name.</div>
</div>
<div class="field">
<label>Your email address <span class="req">*</span></label>
<input type="email" id="introEmail" placeholder="jane@practice.com" />
<div class="help">This is where your resume link would be sent if you save and continue later.</div>
<div class="err-msg" id="err-introEmail">Please enter a valid email.</div>
</div>
<button class="btn-primary" style="width: 100%;" id="btnBeginAudit">Begin Analysis →</button>
</div>
<div id="resumePanel" class="hide">
<div class="field">
<label>Enter your resume code</label>
<input type="text" id="resumeCode" placeholder="WRAN-XXXX-XXXX" style="text-transform: uppercase; font-family: 'SF Mono', monospace;" />
<div class="help">You received this code when you saved your progress.</div>
<div class="err-msg" id="err-resumeCode">Code not found. Double-check your code or start a new analysis.</div>
</div>
<button class="btn-primary" style="width: 100%;" id="btnResumeAudit">Resume Analysis →</button>
</div>
</div>
</div>
</div>
<!-- ============ MAIN APP ============ -->
<div id="app" class="app-shell hide">
<aside class="sidebar">
<div class="sidebar-head">
<div class="brand">STEPHANIE<span class="brand-accent">WRIGHT</span></div>
<div class="sub">The w<span class="r-accent" style="font-size: 12px;">R</span>ight Analysis</div>
<div class="client-logo" id="clientLogoWrap">
<img id="clientLogoImg" alt="Practice logo" />
<div class="client-name" id="clientLogoName"></div>
</div>
</div>
<ul class="section-nav" id="sectionNav">
<!-- populated by JS -->
</ul>
</aside>
<main class="main">
<div class="topbar">
<div class="progress-track">
<div class="progress-label" id="progressLabel">Section 1 of 16</div>
<div class="progress-bar"><div class="progress-fill" id="progressFill" style="width: 6.25%;"></div></div>
</div>
<div class="user-chip">
<span class="chip-name" id="userName">—</span>
<span class="chip-code" id="userCode">—</span>
</div>
</div>
<div class="content" id="sectionContent">
<!-- ============ SECTION 1: DEMOGRAPHICS ============ -->
<section id="section-1">
<div class="section-header">
<div class="eyebrow">Section 1 of 16</div>
<h1>Practice Demographics & Overview</h1>
<div class="section-desc">Let's start with the basics — who you are, where you are, and a snapshot of the people and space behind the practice.</div>
</div>
<!-- BLOCK: PRACTICE INFORMATION -->
<div class="block">
<div class="block-title">Practice Information</div>
<div class="block-sub">Core identifying details about the business.</div>
<div class="grid-2">
<div class="field">
<label>Practice name <span class="req">*</span></label>
<input type="text" data-req name="practiceName" />
</div>
<div class="field">
<label>Practice DBA <span style="font-weight: 400; color: var(--muted);">(if different)</span></label>
<input type="text" name="practiceDba" />
</div>
</div>
<div class="field">
<label>Street address <span class="req">*</span></label>
<input type="text" data-req name="street" />
</div>
<div class="grid-3">
<div class="field">
<label>City <span class="req">*</span></label>
<input type="text" data-req name="city" />
</div>
<div class="field">
<label>State <span class="req">*</span></label>
<input type="text" data-req name="state" maxlength="2" style="text-transform: uppercase;" />
</div>
<div class="field">
<label>ZIP <span class="req">*</span></label>
<input type="text" data-req name="zip" maxlength="10" />
</div>
</div>
<div class="grid-2">
<div class="field">
<label>Main phone <span class="req">*</span></label>
<input type="tel" data-req name="mainPhone" placeholder="(555) 555-5555" />
</div>
<div class="field">
<label>Practice email <span class="req">*</span></label>
<input type="email" data-req name="practiceEmail" />
</div>
</div>
<div class="grid-2">
<div class="field">
<label>Practice website</label>
<input type="url" name="website" placeholder="https://" />
</div>
<div class="field">
<label>Years in current location <span class="req">*</span></label>
<input type="number" data-req name="yearsInLocation" min="0" step="1" />
</div>
</div>
</div>
<!-- BLOCK: BUILDING & SPACE -->
<div class="block">
<div class="block-title">Building & Space</div>
<div class="block-sub">Tell us about the physical footprint of your practice.</div>
<div class="grid-2">
<div class="field">
<label>Practice type <span class="req">*</span></label>
<select data-req name="practiceType">
<option value="">Select one…</option>
<option>Standalone building</option>
<option>Suite in a larger building</option>
<option>Condo</option>
<option>Other</option>
</select>
</div>
<div class="field">
<label>Building ownership <span class="req">*</span></label>
<select data-req name="buildingOwnership" id="buildingOwnership">
<option value="">Select one…</option>
<option value="Owned by practice">Owned by practice</option>
<option value="Owned by Doctor personally">Owned by Doctor personally</option>
<option value="Leased">Leased</option>
</select>
</div>
</div>
<div id="leaseDetails" class="hide">
<div class="grid-2">
<div class="field">
<label>Landlord name <span class="req">*</span></label>
<input type="text" data-req-lease name="landlordName" />
</div>
<div class="field">
<label>Lease end date <span class="req">*</span></label>
<input type="date" data-req-lease name="leaseEndDate" />
</div>
</div>
<div class="grid-2">
<div class="field">
<label>Monthly rent <span class="req">*</span></label>
<input type="number" data-req-lease name="monthlyRent" min="0" step="0.01" placeholder="0.00" />
</div>
<div class="field">
<label>Lease type <span class="req">*</span></label>
<select data-req-lease name="leaseType">
<option value="">Select one…</option>
<option>NNN (Triple Net)</option>
<option>Gross</option>
<option>Modified Gross</option>
</select>
</div>
</div>
</div>
<div class="field">
<label>Square footage <span class="req">*</span></label>
<input type="number" data-req name="sqft" min="0" step="1" />
</div>
</div>
<!-- BLOCK: OPERATORIES -->
<div class="block">
<div class="block-title">Operatories</div>
<div class="block-sub">Help us understand your true operatory capacity. Plumbed-but-unused ops often represent untapped growth room.</div>
<div class="grid-2">
<div class="field">
<label>Working & in-use operatories <span class="req">*</span></label>
<input type="number" data-req id="opsInUse" name="opsInUse" min="0" step="1" />
<div class="help">Fully equipped and currently being used for patient care.</div>
</div>
<div class="field">
<label>Plumbed but not in use <span class="req">*</span></label>
<input type="number" data-req id="opsPlumbed" name="opsPlumbed" min="0" step="1" />
<div class="help">Rooms that are plumbed/wired but sit empty or are used for storage.</div>
</div>
</div>
<div class="op-recon ok" id="totalOpsDisplay">
<span>Total operatories</span>
<span><strong id="totalOpsValue">0</strong></span>
</div>
<div style="margin-top: 28px;">
<div style="font-weight: 600; font-size: 14px; margin-bottom: 6px;">
Of your working & in-use operatories, how are they equipped?
</div>
<div style="font-size: 13px; color: var(--muted); margin-bottom: 14px;">Optional — skip if you're not sure or don't need to break it down.</div>
<div class="grid-3">
<div class="field">
<label>Hygiene-only ops</label>
<input type="number" id="opsHyg" name="opsHyg" min="0" step="1" />
</div>
<div class="field">
<label>Doctor-only ops</label>
<input type="number" id="opsDr" name="opsDr" min="0" step="1" />
</div>
<div class="field">
<label>Dual-equipped ops</label>
<input type="number" id="opsDual" name="opsDual" min="0" step="1" />
<div class="help">Can do both hygiene and doctor procedures.</div>
</div>
</div>
<div class="op-recon ok" id="opReconDisplay">
<span>Equipped ops total matches in-use total</span>
<span id="opReconValue">0 / 0</span>
</div>
</div>
</div>
<!-- BLOCK: PRACTICE LOGO -->
<div class="block">
<div class="block-title">Practice Logo <span style="font-weight: 400; color: var(--muted); font-size: 14px;">— optional</span></div>
<div class="block-sub">Upload your logo and we'll personalize the rest of your analysis experience. This also appears in the final report.</div>
<label class="logo-upload" id="logoUpload">
<input type="file" id="logoFile" accept="image/*" />
<div id="logoEmpty">
<div class="upload-icon">⤒</div>
<div class="upload-text">Click to upload your practice logo<br><span style="font-size: 11px;">PNG, JPG, or SVG</span></div>
</div>
<div id="logoFilled" class="hide">
<img id="logoPreview" class="logo-preview" alt="Logo preview" />
<div style="font-size: 12px; color: var(--muted); margin-top: 8px;">Click to change</div>
</div>
</label>
</div>
<!-- BLOCK: OWNERSHIP -->
<div class="block">
<div class="block-title">Ownership</div>
<div class="block-sub">Who owns this practice? Enter the total count first, then we'll add a card for each owner/partner.</div>
<div class="field" style="max-width: 280px;">
<label>How many owners/partners? <span class="req">*</span></label>
<input type="number" id="ownerCount" min="0" max="20" step="1" value="0" />
<div class="help">Enter 0 if the practice has no formal owners (rare) — or the number of individuals who hold ownership.</div>
</div>
<div id="ownersContainer" style="margin-top: 24px;"></div>
<div id="ownershipTotal" class="ownership-total warn hide">
<span>Ownership total</span>
<span id="ownershipTotalValue">0% — needs 100%</span>
</div>
</div>
<!-- BLOCK: ACQUISITION -->
<div class="block">
<div class="block-title">Practice Acquisition</div>
<div class="block-sub">How did the current ownership come to run this practice?</div>
<div class="field">
<label>How was the current practice acquired? <span class="req">*</span></label>
<select data-req id="acquisition" name="acquisition">
<option value="">Select one…</option>
<option>Startup from scratch</option>
<option>Bought from retiring dentist</option>
<option>Bought from non-retiring dentist</option>
<option>Inherited</option>
<option>Partnership buy-in</option>
<option>Merger</option>
<option>Other</option>
</select>
</div>
<div id="acquisitionDetails" class="hide">
<div class="grid-2">
<div class="field">
<label>Year acquired <span class="req">*</span></label>
<input type="number" data-req-acq name="yearAcquired" min="1900" max="2100" step="1" />
</div>
<div class="field">
<label>Prior owner name <span style="font-weight: 400; color: var(--muted);">(optional)</span></label>
<input type="text" name="priorOwner" />
</div>
</div>
</div>
</div>
<!-- BLOCK: HISTORY & NARRATIVE -->
<div class="block">
<div class="block-title">History & Narrative</div>
<div class="block-sub">Give us the story behind the practice — this context helps me coach you better.</div>
<div class="field">
<label>Brief practice history</label>
<textarea name="history" rows="5" placeholder="Tell us how the practice started, where it's been, and where it is today."></textarea>
</div>
<div class="field">
<label>Major milestones or transitions</label>
<textarea name="milestones" rows="4" placeholder="Expansions, partner changes, rebrands, relocations, etc."></textarea>
</div>
<div class="field">
<label>Previous consultants or coaches — and your experience with them</label>
<textarea name="priorConsultants" rows="4" placeholder="Who have you worked with, what did they help with, and what was your experience? Include the good, the bad, and the mixed — this helps me understand what's worked for you and what hasn't."></textarea>
</div>
</div>
</section>
<!-- ============ SECTION 2: GOALS & VISION ============ -->
<section id="section-2" class="hide">
<div class="section-header">
<div class="eyebrow">Section 2 of 16</div>
<h1>Goals, Vision & <span class="brand-highlight">The Real Picture</span></h1>
<div class="section-desc">This is where we get to the root of what's really going on.</div>
</div>
<div class="intro-callout">
<div class="callout-eyebrow">A note from Stephanie before you dive in</div>
<p>The more I know about your practice — the people, pain points, fear, and the stuff you wouldn't tell your best friend happening inside the walls of your practice — is relevant to the sooner we make progress. <strong>If you don't tell me now, I promise, I will find it. I always do.</strong> I have seen fraud, affairs that ended with the spouse deleting all future appointments — I have endless stories.</p>
<p>The name <strong>The Bold Authority</strong> isn't just a label. It's because I <em>am</em> bold. I break the norm for "Consulting" systems because I collaborate with you — where you were, where you are now, and your future. I assure you it won't be the last time something happens you wouldn't tell your best friend, but if you let me in, I can promise I am with you for the journey.</p>
<p>The more you share here, the sooner progress happens. On the sensitive questions, you'll see a "Prefer not to answer" option — checking it tells me something too. <strong>Lean in. Be honest. This is where we start getting to the root.</strong></p>
</div>
<!-- ========== BLOCK A: YOUR TEAM ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block A</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Your Team — The Real Picture</span>
</div>
<div class="prompt-q" data-qid="q1">
<div class="prompt-q-num">Q1</div>
<div class="prompt-q-label">Who's the team member you'd never want to lose?</div>
<div class="prompt-q-story">Think Batman and Robin — who is your ride or die in the practice?</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q2">
<div class="prompt-q-num">Q2</div>
<div class="prompt-q-label">Who's the unofficial leader of your team — not by title, but by influence?</div>
<div class="prompt-q-story">That person others are drawn to. Doesn't seek a leadership title but truly lives up to "lead by example" without ever being asked to.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q3" data-sensitive>
<div class="prompt-q-num">Q3</div>
<div class="prompt-q-label">Who's the team member you find yourself making excuses for?</div>
<div class="prompt-q-story">You know who they are. Possibly the underdog whose home life is a train wreck? Or they might be your Robin and are SOOOO good at their job that you make excuses for other behaviors — not pulling their weight in other areas, overriding practice systems.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q3" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q4" data-sensitive>
<div class="prompt-q-num">Q4</div>
<div class="prompt-q-label">Who's the team member you've been meaning to let go of for over 6 months? Why haven't you?</div>
<div class="prompt-q-story">Come on — you know there's that one team member you're terrified will destroy your practice or lose patients if you let them go. Spoiler: that never happens. If anything, the pain-in-the-ass patients follow them. Good riddance — don't let the door hit 'em on the way out.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q4" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q5" data-sensitive>
<div class="prompt-q-num">Q5</div>
<div class="prompt-q-label">Who on the team do you think is actively looking for another job?</div>
<div class="prompt-q-story">Listen, it happens. Some chase money, others driving distance, and many of them leave because of toxicity.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q5" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q6" data-sensitive>
<div class="prompt-q-num">Q6</div>
<div class="prompt-q-label">Are there cliques or factions in the practice?</div>
<div class="prompt-q-story">The front vs. the back. Or the assistants against hygiene because hygiene never takes care of their instruments and drops it all on the assistants.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q6" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q7" data-sensitive>
<div class="prompt-q-num">Q7</div>
<div class="prompt-q-label">Who on your team is underperforming but you're afraid to address?</div>
<div class="prompt-q-story">Think of the overly emotional one who either cries or has petty behavior for a week after you address something.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q7" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q8" data-sensitive>
<div class="prompt-q-num">Q8</div>
<div class="prompt-q-label">Who on the team knows too much — someone whose exit would sting because of what they could take with them?</div>
<div class="prompt-q-story">I had a client whose team member always made passive-aggressive comments about how the doctor was money hungry because they selectively scheduled patients according to insurance. This team member's husband was a cop and her dad was a lawyer. So the digs and passive-aggressive comments started to make the doctor believe everything they were saying — and he was scared to death to let her go.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q8" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q9" data-sensitive>
<div class="prompt-q-num">Q9</div>
<div class="prompt-q-label">Are there any inappropriate workplace relationships you're aware of?</div>
<div class="prompt-q-story">Again, I've seen it all. Statistically, it's usually a relationship that includes a doctor. I'm not here to judge — I just want to know what I'm walking into.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q9" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q10" data-sensitive>
<div class="prompt-q-num">Q10</div>
<div class="prompt-q-label">Do you suspect anyone is stealing, embezzling, or mishandling money?</div>
<div class="prompt-q-story">I found $750K in embezzlement from a woman who kept a Bible on her desk and one in the cash drawer. They are out there.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q10" /> Prefer not to answer</label>
</div>
</div>
<!-- ========== BLOCK B: FRUSTRATIONS & REALITY CHECK ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block B</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Frustrations & Reality Check</span>
</div>
<div class="prompt-q" data-qid="q11">
<div class="prompt-q-num">Q11</div>
<div class="prompt-q-label">What's the biggest frustration you're facing in the practice right now?</div>
<div class="prompt-q-story">Team toxicity. The zombie drive to work dreading what fresh hell you're walking into. Can't pay your bills, hardly make payroll. Drama. I need it all.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q12">
<div class="prompt-q-num">Q12</div>
<div class="prompt-q-label">What's the one thing about your practice that would embarrass you if a colleague saw it?</div>
<div class="prompt-q-story">Is it the basement full of 20-year-old X-ray arms? All 17 out-of-commission amalgamators you might use someday? Still using paper charts? Yeah — it's the 21st century. Let's move on.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q13">
<div class="prompt-q-num">Q13</div>
<div class="prompt-q-label">When was the last time you took a full week off without checking email?</div>
<div class="prompt-q-story">I'm 110% guilty of this. I'm quite certain I'd still answer your emails and texts if I were on vacation.</div>
<textarea data-q2-field rows="2"></textarea>
</div>
<div class="prompt-q" data-qid="q14">
<div class="prompt-q-num">Q14</div>
<div class="prompt-q-label">What's the one task you do every week that someone else should be doing?</div>
<div class="prompt-q-story">One, or ten? Listen, you can't do it all. It will put you in a grave. Time to let go. Don't be a micromanager. Let people make mistakes — it happens to all of us.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q15">
<div class="prompt-q-num">Q15</div>
<div class="prompt-q-label">What's keeping you up at night about this practice?</div>
<div class="prompt-q-story">I'm just digging in on this — maybe not anything you're losing sleep over, but no practice is perfect. And if you tell me there are no stressors at work that come home with you, I'm calling you a LIAR.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q16">
<div class="prompt-q-num">Q16</div>
<div class="prompt-q-label">Do you feel like you're running the practice, or is the practice running you?</div>
<div class="prompt-q-story">Million dollar question! Clue: it SHOULD NOT be option two.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q17">
<div class="prompt-q-num">Q17</div>
<div class="prompt-q-label">If you could change one thing right now with no consequences, what would it be?</div>
<div class="prompt-q-story">Think Harry Potter meets Marvel — what kind of magic would you want with a flick of a wand?</div>
<textarea data-q2-field rows="3"></textarea>
</div>
</div>
<!-- ========== BLOCK C: THE MONEY TRUTH ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block C</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">The Money Truth</span>
</div>
<div class="prompt-q" data-qid="q18" data-sensitive>
<div class="prompt-q-num">Q18</div>
<div class="prompt-q-label">Are you behind on any tax filings or tax payments?</div>
<div class="prompt-q-story">Listen, I have to know these things. It is okay — and as much as I might poke fun, I assure you this is a serious matter and will be handled with the utmost compassion and understanding. But let's start digging your way out together.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q18" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q19" data-sensitive>
<div class="prompt-q-num">Q19</div>
<div class="prompt-q-label">Are there any outstanding loans, liens, legal issues, or judgments against the practice?</div>
<div class="prompt-q-story">Again, no judgment. I'm here to collaborate with you on solutions.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q19" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q20" data-sensitive>
<div class="prompt-q-num">Q20</div>
<div class="prompt-q-label">Have you ever had cash deposits or withdrawals you couldn't explain?</div>
<div class="prompt-q-story">This one stings. About a decade ago I had a client where I discovered significant cash missing for years. And just like so many other doctors, they didn't have the time or want the stress to press charges. Fast forward 8 years. This same person was just hired into a practice I started working with — and I had nothing to do with the recruitment or vetting. I recognized the name and told my client. He wanted to do his due diligence and ask her about it. He did, and she confessed to two OTHER practices she embezzled from. I can't make this shit up. TRUE STORY.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q20" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q21" data-sensitive>
<div class="prompt-q-num">Q21</div>
<div class="prompt-q-label">Do you suspect any form of employee theft or embezzlement?</div>
<div class="prompt-q-story">I just have to ask in all the different directions on this. I need to look at all angles to help the practice.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q21" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q23" data-sensitive>
<div class="prompt-q-num">Q23</div>
<div class="prompt-q-label">Are there patient balances you've given up on collecting?</div>
<div class="prompt-q-story">STOP BEING NICE. You have a business to run and employees to take care of.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q23" /> Prefer not to answer</label>
</div>
</div>
<!-- ========== BLOCK D: CLINICAL, COMPLIANCE & LEGAL ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block D</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Clinical, Compliance & Legal</span>
</div>
<div class="prompt-q" data-qid="q24" data-sensitive>
<div class="prompt-q-num">Q24</div>
<div class="prompt-q-label">Any known compliance issues (HIPAA, OSHA, infection control) you haven't addressed?</div>
<div class="prompt-q-story">If you don't tell me now, I will find out and bring it up. I had a prospective client running unused cotton rolls in the autoclave and cold-sterilizing HVE and saliva ejectors. Another one where a team member kept their USED TOOTHBRUSH in the same drawer as instrument packs — and some of those packs were open with instruments pulled out.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q24" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q25" data-sensitive>
<div class="prompt-q-num">Q25</div>
<div class="prompt-q-label">Are there any unresolved patient complaints, bad reviews, or a–hole patients you want gone?</div>
<div class="prompt-q-story">We can't please them all. Just let me know about them — or even just patients who are assholes, a pain in the ass time killer, and you'd love to see them hit the road. Let's make a plan for it. We can't let poor behavior from patients get swept under the rug, or you can expect the same from employees.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q25" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q26" data-sensitive>
<div class="prompt-q-num">Q26</div>
<div class="prompt-q-label">Are there procedures being done in your office that you personally wouldn't sign off on?</div>
<div class="prompt-q-story">I had a practice where an associate was afraid of doing the owner's redos because the fillings from 6 months ago were already breaking down — bad margins or just falling out.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q26" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q27" data-sensitive>
<div class="prompt-q-num">Q27</div>
<div class="prompt-q-label">Have any malpractice claims or lawsuits ever been threatened or filed?</div>
<div class="prompt-q-story">I can't tell you how many court cases I've helped with. Most lead to a doctor wanting to do the right thing and it going sideways. Some — unfortunately — knew they were doing wrong.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q27" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q28" data-sensitive>
<div class="prompt-q-num">Q28</div>
<div class="prompt-q-label">Any equipment being worked around instead of fixed?</div>
<div class="prompt-q-story">Does it belong in the graveyard of equipment in your basement that you plan to get to someday, right?</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q28" /> Prefer not to answer</label>
</div>
<div class="prompt-q" data-qid="q29" data-sensitive>
<div class="prompt-q-num">Q29</div>
<div class="prompt-q-label">Are you coding what you're doing, and doing what you're coding?</div>
<div class="prompt-q-story">Fraud is fraud. Code what you do, do what you code. The sooner you tell me, the sooner we can turn things around.</div>
<textarea data-q2-field rows="3"></textarea>
<label class="prompt-q-skip"><input type="checkbox" data-skip-for="q29" /> Prefer not to answer</label>
</div>
</div>
<!-- ========== BLOCK E: VISION & FUTURE ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block E</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Vision & Future</span>
</div>
<div class="prompt-q" data-qid="q30">
<div class="prompt-q-num">Q30</div>
<div class="prompt-q-label">What updated equipment and technology is top on your wish list?</div>
<div class="prompt-q-story">Let's dream a little. CBCT? Scanner? Nitrous in every op? Full digital workflow? Tell me what's at the top of the list.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q31">
<div class="prompt-q-num">Q31</div>
<div class="prompt-q-label">If you died or were suddenly unable to work tomorrow, would this practice survive — and who would run it?</div>
<div class="prompt-q-story">Unexpected deaths happen. Just a few years ago I lost a client in her sleep — very healthy, had just had a scan confirming her ovarian cancer was still in remission, cleared. Got the flu a couple weeks later and died in her sleep. Autopsy was inconclusive. Preparing for the worst is the best thing you can do for your practice.</div>
<textarea data-q2-field rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="q32">
<div class="prompt-q-num">Q32</div>
<div class="prompt-q-label">Where do you want this practice to be in 5 years?</div>
<div class="prompt-q-story">Paint me the picture. Revenue, team size, services offered, how many days a week you're working, what the patient experience feels like. Dream big — this is where we're heading.</div>
<textarea data-q2-field rows="5"></textarea>
</div>
<div class="prompt-q" data-qid="q33">
<div class="prompt-q-num">Q33</div>
<div class="prompt-q-label">What's your retirement or exit timeline?</div>
<div class="prompt-q-story">No judgment whether it's next year or never. This just helps me understand what we're building toward.</div>
<select data-q2-field>
<option value="">Select one…</option>
<option>Less than 5 years</option>
<option>5–10 years</option>
<option>10–20 years</option>
<option>20+ years</option>
<option>No plan yet</option>
</select>
</div>
</div>
<div class="progress-counter" id="q2Counter">
<div>
<span class="counter-num" id="q2AnsweredCount">0 of 32</span>
<span style="margin-left: 10px;">questions answered</span>
</div>
<div class="counter-note">The more you share, the more I can help.</div>
</div>
</section>
<!-- ============ SECTION 3: CARE MODEL & PREVENTION PHILOSOPHY ============ -->
<section id="section-3" class="hide">
<div class="section-header">
<div class="eyebrow">Section 3 of 16</div>
<h1>Care Model & <span class="brand-highlight">Prevention Philosophy</span></h1>
<div class="section-desc">How you approach dentistry — the clinical philosophy, prevention program, hygiene model, and standard of care that define your practice.</div>
</div>
<!-- ========== BLOCK A: CARE PHILOSOPHY ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block A</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Care Philosophy</span>
</div>
<div class="prompt-q" data-qid="s3a1">
<div class="prompt-q-num">A1</div>
<div class="prompt-q-label">Describe your care philosophy</div>
<div class="prompt-q-story">Be as detailed as possible — one doctor's "comprehensive" isn't the same as another's. What drives your clinical decisions? How do you frame treatment to patients? What's non-negotiable in your practice?</div>
<textarea data-s3-field name="s3_a1_philosophy" rows="4" placeholder="Example: We're prevention-first and minimally invasive. I believe in full-mouth treatment planning — no band-aids. Every patient gets a comprehensive exam at their first visit and we walk through their whole mouth together using intraoral photos. We don't push cosmetic unless the patient asks for it, but we will never leave decay untreated or active perio unaddressed."></textarea>
</div>
<div class="prompt-q" data-qid="s3a2">
<div class="prompt-q-num">A2</div>
<div class="prompt-q-label">What expanded services do you offer beyond bread-and-butter dentistry?</div>
<div class="prompt-q-story">Be as detailed as possible — for each service, tell me whether you do it in-house or refer out, how often you do it, and anything unique about how you deliver it.<br><br>Examples:<br>• <em>Implants — I place and restore about 80/month, using Nobel Biocare</em><br>• <em>Clear aligners — Invisalign + Spark, about 15 active cases, I do all treatment planning myself</em><br>• <em>Sedation — IV sedation in-house (I'm licensed), about 2 cases/week</em><br>• <em>Holistic/biologic — metal-free practice, ozone therapy, material biocompatibility testing</em><br>• <em>CEREC same-day crowns, sleep appliances for mild OSA, TMJ splint therapy, endo on most molars, Botox for TMJ</em></div>
<textarea data-s3-field name="s3_a2_expanded" rows="6"></textarea>
</div>
<div class="prompt-q" data-qid="s3a3">
<div class="prompt-q-num">A3</div>
<div class="prompt-q-label">What's your "ideal patient"?</div>
<div class="prompt-q-story">Describe the patient you love treating. Who comes to mind? What makes them your ideal?</div>
<textarea data-s3-field name="s3_a3_ideal" rows="3"></textarea>
</div>
<div class="prompt-q" data-qid="s3a4">
<div class="prompt-q-num">A4</div>
<div class="prompt-q-label">Do you practice according to any specific clinical framework?</div>
<div class="prompt-q-story">Select all that apply — these are the CE pathways and clinical philosophies that have shaped how you practice.</div>
<div class="checkbox-grid">
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="Pankey" /> Pankey</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="Dawson" /> Dawson</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="Kois" /> Kois</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="Spear" /> Spear</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="OBI" /> OBI (Occlusion By Incorporation)</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="Gordon Christensen" /> Gordon Christensen</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="Scottsdale Center" /> Scottsdale Center</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_a4_frameworks" value="None specifically" /> None specifically</label>
</div>
<input type="text" data-s3-field name="s3_a4_other" placeholder="Other (specify)" style="margin-top: 10px;" />
</div>
</div>
<!-- ========== BLOCK B: PREVENTION PROGRAM ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block B</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Prevention Program</span>
</div>
<div class="prompt-q" data-qid="s3b1">
<div class="prompt-q-num">B1</div>
<div class="prompt-q-label">Do you have a defined recall/recare system?</div>
<select data-s3-field name="s3_b1_recall_system">
<option value="">Select one…</option>
<option>Yes — formal written system</option>
<option>Yes — informal but consistent</option>
<option>We do our best</option>
<option>No system in place</option>
</select>
</div>
<div class="prompt-q" data-qid="s3b2">
<div class="prompt-q-num">B2</div>
<div class="prompt-q-label">Perio risk assessment tool used?</div>
<select data-s3-field name="s3_b2_perio_risk">
<option value="">Select one…</option>
<option>Yes — AAP Staging & Grading</option>
<option>Yes — PreViser</option>
<option>Yes — practice-specific protocol</option>
<option>No formal tool</option>
<option>Other</option>
</select>
<input type="text" data-s3-field name="s3_b2_other" placeholder="If Other — specify" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3b3">
<div class="prompt-q-num">B3</div>
<div class="prompt-q-label">Caries risk assessment used?</div>
<select data-s3-field name="s3_b3_caries_risk">
<option value="">Select one…</option>
<option>Yes — CAMBRA</option>
<option>Yes — ADA Caries Risk Assessment</option>
<option>Yes — practice-specific</option>
<option>No formal tool</option>
<option>Other</option>
</select>
<input type="text" data-s3-field name="s3_b3_other" placeholder="If Other — specify" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3b4">
<div class="prompt-q-num">B4</div>
<div class="prompt-q-label">Fluoride protocol for adults</div>
<select data-s3-field name="s3_b4_fluoride">
<option value="">Select one…</option>
<option>Always offered at every hygiene visit</option>
<option>By caries risk only</option>
<option>Only offered to children</option>
<option>Rarely / not offered</option>
</select>
</div>
<div class="prompt-q" data-qid="s3b5">
<div class="prompt-q-num">B5</div>
<div class="prompt-q-label">Do you use Silver Diamine Fluoride (SDF)?</div>
<select data-s3-field name="s3_b5_sdf">
<option value="">Select one…</option>
<option>Yes</option>
<option>No</option>
<option>Sometimes</option>
</select>
</div>
<div class="prompt-q" data-qid="s3b6">
<div class="prompt-q-num">B6</div>
<div class="prompt-q-label">Sealants protocol</div>
<select data-s3-field name="s3_b6_sealants">
<option value="">Select one…</option>
<option>Always for pediatric permanent molars</option>
<option>By caries risk assessment</option>
<option>On request only</option>
<option>Rarely used</option>
</select>
</div>
<div class="prompt-q" data-qid="s3b7">
<div class="prompt-q-num">B7</div>
<div class="prompt-q-label">Home care products — do you sell or recommend?</div>
<select data-s3-field name="s3_b7_homecare">
<option value="">Select one…</option>
<option>We sell in-office</option>
<option>We recommend but don't sell</option>
<option>Limited recommendations</option>
<option>None</option>
</select>
<input type="text" data-s3-field name="s3_b7_products" placeholder="If you sell or recommend — list the main products" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3b8">
<div class="prompt-q-num">B8</div>
<div class="prompt-q-label">Is there anything unique about your prevention philosophy you want me to know?</div>
<textarea data-s3-field name="s3_b8_unique" rows="3"></textarea>
</div>
</div>
<!-- ========== BLOCK C: HYGIENE MODEL ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block C</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Hygiene Model</span>
</div>
<div class="prompt-q" data-qid="s3c1">
<div class="prompt-q-num">C1</div>
<div class="prompt-q-label">Average adult hygiene appointment length</div>
<select data-s3-field name="s3_c1_adult_len">
<option value="">Select one…</option>
<option>45 min</option>
<option>60 min</option>
<option>75 min</option>
<option>90 min</option>
<option>Varies</option>
</select>
</div>
<div class="prompt-q" data-qid="s3c2">
<div class="prompt-q-num">C2</div>
<div class="prompt-q-label">Average pediatric hygiene appointment length</div>
<select data-s3-field name="s3_c2_ped_len">
<option value="">Select one…</option>
<option>30 min</option>
<option>45 min</option>
<option>60 min</option>
<option>Varies</option>
</select>
</div>
<div class="prompt-q" data-qid="s3c3">
<div class="prompt-q-num">C3</div>
<div class="prompt-q-label">Who schedules the patient's next recall?</div>
<select data-s3-field name="s3_c3_recall_scheduler">
<option value="">Select one…</option>
<option>Hygienist schedules in the op before patient leaves</option>
<option>Front desk at checkout</option>
<option>Patient is asked to call later to schedule</option>
<option>Automated reminder — patient books online</option>
<option>Mix of above</option>
</select>
</div>
<div class="prompt-q" data-qid="s3c4">
<div class="prompt-q-num">C4</div>
<div class="prompt-q-label">Does the doctor do an exam at every hygiene visit?</div>
<select data-s3-field name="s3_c4_dr_exam">
<option value="">Select one…</option>
<option>Yes, every visit</option>
<option>Every other visit</option>
<option>Annually only</option>
<option>As needed / by exception</option>
</select>
</div>
<div class="prompt-q" data-qid="s3c5">
<div class="prompt-q-num">C5</div>
<div class="prompt-q-label">Who sets the recall interval?</div>
<select data-s3-field name="s3_c5_interval_setter">
<option value="">Select one…</option>
<option>Doctor decides every time</option>
<option>Hygienist decides based on assessment</option>
<option>Collaborative / case-by-case</option>
<option>Default 6-month unless flagged</option>
</select>
</div>
<div class="prompt-q" data-qid="s3c6">
<div class="prompt-q-num">C6</div>
<div class="prompt-q-label">Are new patients seen with the hygienist?</div>
<select data-s3-field name="s3_c6_np_hyg">
<option value="">Select one…</option>
<option>Yes — new patient always starts with hygiene</option>
<option>No — new patient sees doctor first, hygiene at separate appointment</option>
<option>Depends on scheduling / patient needs</option>
<option>Other</option>
</select>
<input type="text" data-s3-field name="s3_c6_other" placeholder="If Other — specify" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3c7">
<div class="prompt-q-num">C7</div>
<div class="prompt-q-label">What does the new patient appointment look like?</div>
<div class="prompt-q-story">Describe the flow — who the patient sees, in what order, and what's included.<br><br>Examples:<br>• <em>90 min with hygienist: FMX, perio charting, adult prophy, doctor comes in for comp exam last 15 min</em><br>• <em>Doctor-first model: 60 min comp exam with doctor + assistant, patient scheduled separately for hygiene</em><br>• <em>Two-visit NP workup — visit 1 with doctor (records, FMX, comp exam, TP consult), visit 2 with hygiene</em></div>
<textarea data-s3-field name="s3_c7_np_flow" rows="4"></textarea>
</div>
<div class="prompt-q" data-qid="s3c8">
<div class="prompt-q-num">C8</div>
<div class="prompt-q-label">How often do you perform perio charting?</div>
<select data-s3-field name="s3_c8_perio_chart">
<option value="">Select one…</option>
<option>Every hygiene visit</option>
<option>Annually</option>
<option>Only when perio concerns arise</option>
<option>Inconsistent / depends on hygienist</option>
</select>
</div>
<div class="prompt-q" data-qid="s3c9">
<div class="prompt-q-num">C9</div>
<div class="prompt-q-label">Do you have a formal perio program (2222 → 4910 pathway)?</div>
<select data-s3-field name="s3_c9_perio_program">
<option value="">Select one…</option>
<option>Yes — documented workflow from SRP to perio maintenance</option>
<option>Informal — we do it but it's not written down</option>
<option>No formal pathway</option>
</select>
</div>
<div class="prompt-q" data-qid="s3c10">
<div class="prompt-q-num">C10</div>
<div class="prompt-q-label">Do you use assisted hygiene?</div>
<select data-s3-field name="s3_c10_assisted">
<option value="">Select one…</option>
<option>Yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" data-s3-field name="s3_c10_other" placeholder="If Other — specify" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3c11">
<div class="prompt-q-num">C11</div>
<div class="prompt-q-label">Anything unique about how your hygiene department runs?</div>
<textarea data-s3-field name="s3_c11_unique" rows="3"></textarea>
</div>
</div>
<!-- ========== BLOCK D: CLINICAL STANDARD OF CARE ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block D</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Clinical Standard of Care</span>
</div>
<div class="prompt-q" data-qid="s3d1">
<div class="prompt-q-num">D1</div>
<div class="prompt-q-label">When do you perform a comprehensive exam (D0150)?</div>
<select data-s3-field name="s3_d1_comp_exam_when" id="s3d1Select">
<option value="">Select one…</option>
<option>Only at new patient appointments</option>
<option value="every-x">New patients + every X years on existing patients</option>
<option>New patients + annually on existing patients</option>
<option>Every visit</option>
<option>Other</option>
</select>
<div id="s3d1XYears" class="hide" style="margin-top: 12px;">
<label style="font-size: 13px; font-weight: 600; color: var(--navy);">Every how many years?</label>
<input type="number" data-s3-field name="s3_d1_x_years" min="1" max="20" step="1" style="max-width: 180px; margin-top: 6px;" />
</div>
</div>
<div class="prompt-q hide" data-qid="s3d2" id="s3d2Block">
<div class="prompt-q-num">D2</div>
<div class="prompt-q-label">Do you use D0150 for comp exams on existing patients, or a modified code (like D0150.1)?</div>
<select data-s3-field name="s3_d2_code_usage">
<option value="">Select one…</option>
<option>We use D0150 for both new and existing</option>
<option>We use D0150 for new, D0150.1 (or similar modifier) for existing</option>
<option>We use a different code for existing</option>
<option>Other</option>
</select>
<input type="text" data-s3-field name="s3_d2_code_specify" placeholder="If different/other — specify the code you use" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3d3">
<div class="prompt-q-num">D3</div>
<div class="prompt-q-label">Periodic exam (D0120) interval</div>
<select data-s3-field name="s3_d3_periodic">
<option value="">Select one…</option>
<option>Every hygiene visit</option>
<option>Every 6 months only</option>
<option>Annually</option>
<option>Varies</option>
</select>
</div>
<div class="prompt-q" data-qid="s3d4">
<div class="prompt-q-num">D4</div>
<div class="prompt-q-label">Bitewing protocol</div>
<select data-s3-field name="s3_d4_bw">
<option value="">Select one…</option>
<option>Annually for all patients</option>
<option>Annually for adults, every 6 months for children</option>
<option>Every 18–24 months for low-risk adults</option>
<option>By caries risk</option>
<option>Other</option>
</select>
</div>
<div class="prompt-q" data-qid="s3d5">
<div class="prompt-q-num">D5</div>
<div class="prompt-q-label">Pano or FMX protocol</div>
<select data-s3-field name="s3_d5_pano_fmx">
<option value="">Select one…</option>
<option>Pano every 3–5 years / FMX every 5 years</option>
<option>Pano/FMX at new patient only</option>
<option>As clinically indicated</option>
<option>Other</option>
</select>
<input type="text" data-s3-field name="s3_d5_other" placeholder="If Other — specify your protocol" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3d6">
<div class="prompt-q-num">D6</div>
<div class="prompt-q-label">Do you have a cone beam (CBCT)?</div>
<select data-s3-field name="s3_d6_cbct">
<option value="">Select one…</option>
<option>Yes — used routinely</option>
<option>Yes — used selectively</option>
<option>No, we refer out when needed</option>
<option>No, we don't use CBCT</option>
</select>
</div>
<div class="prompt-q" data-qid="s3d7">
<div class="prompt-q-num">D7</div>
<div class="prompt-q-label">Intraoral scanner — how do you use it?</div>
<div class="prompt-q-story">Select all that apply.</div>
<div class="checkbox-grid">
<label class="cbx"><input type="checkbox" data-s3-check="s3_d7_scanner" value="For all crown/implant cases" /> For all crown/implant cases</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_d7_scanner" value="For ortho cases" /> For ortho cases</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_d7_scanner" value="For all new patients (baseline scan)" /> For all new patients (baseline scan)</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_d7_scanner" value="Selectively / when indicated" /> Selectively / when indicated</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_d7_scanner" value="We still take traditional impressions" /> We still take traditional impressions</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_d7_scanner" value="Other" /> Other</label>
</div>
<input type="text" data-s3-field name="s3_d7_other" placeholder="If Other — specify" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3d8">
<div class="prompt-q-num">D8</div>
<div class="prompt-q-label">Digital vs. paper charting</div>
<select data-s3-field name="s3_d8_charting">
<option value="">Select one…</option>
<option>Fully digital / paperless</option>
<option>Mostly digital, some paper</option>
<option>Still largely paper</option>
<option>Transitioning</option>
</select>
</div>
<div class="prompt-q" data-qid="s3d9">
<div class="prompt-q-num">D9</div>
<div class="prompt-q-label">Do you use standardized clinical note templates?</div>
<select data-s3-field name="s3_d9_templates">
<option value="">Select one…</option>
<option>Yes — templates for every procedure</option>
<option>Yes for some, free-text for others</option>
<option>No — all free-text</option>
<option>Inconsistent across providers</option>
</select>
</div>
<div class="prompt-q" data-qid="s3d10">
<div class="prompt-q-num">D10</div>
<div class="prompt-q-label">Anything unique about your clinical standard of care?</div>
<textarea data-s3-field name="s3_d10_unique" rows="3"></textarea>
</div>
</div>
<!-- ========== BLOCK E: PATIENT EDUCATION ========== -->
<div class="block">
<div class="block-category-head">
<span class="cat-num">Block E</span>
<span style="font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy);">Patient Education</span>
</div>
<div class="prompt-q" data-qid="s3e1">
<div class="prompt-q-num">E1</div>
<div class="prompt-q-label">Do you use intraoral cameras?</div>
<select data-s3-field name="s3_e1_cameras">
<option value="">Select one…</option>
<option>Yes, every op</option>
<option>Some ops</option>
<option>Only when clinically indicated</option>
<option>Rarely / not used</option>
<option>Other</option>
</select>
</div>
<div class="prompt-q" data-qid="s3e2">
<div class="prompt-q-num">E2</div>
<div class="prompt-q-label">Do you show patients their own imaging?</div>
<select data-s3-field name="s3_e2_imaging">
<option value="">Select one…</option>
<option>Yes, routinely — X-rays, photos, scanner images shown on monitor</option>
<option>Sometimes when relevant</option>
<option>Rarely</option>
<option>Not part of our workflow</option>
</select>
</div>
<div class="prompt-q" data-qid="s3e3">
<div class="prompt-q-num">E3</div>
<div class="prompt-q-label">What patient education tools do you use?</div>
<div class="prompt-q-story">Select all that apply.</div>
<div class="checkbox-grid">
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="Chairside monitors showing imaging" /> Chairside monitors showing imaging</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="Pre-recorded education videos (Guru, CAESY, etc.)" /> Pre-recorded education videos (Guru, CAESY, etc.)</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="Custom in-office videos" /> Custom in-office videos</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="Printed take-home materials" /> Printed take-home materials</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="Digital treatment plan walkthroughs" /> Digital treatment plan walkthroughs</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="App-based education (patient portal)" /> App-based education (patient portal)</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="Verbal only" /> Verbal only</label>
<label class="cbx"><input type="checkbox" data-s3-check="s3_e3_tools" value="Other" /> Other</label>
</div>
<input type="text" data-s3-field name="s3_e3_other" placeholder="If Other — specify" style="margin-top: 10px;" />
</div>
<div class="prompt-q" data-qid="s3e4">
<div class="prompt-q-num">E4</div>
<div class="prompt-q-label">Is home care discussed at every hygiene visit?</div>
<select data-s3-field name="s3_e4_homecare_talk">
<option value="">Select one…</option>
<option>Yes, every visit, documented</option>
<option>Yes, but not documented</option>
<option>Only when concerns arise</option>
<option>Not consistently</option>
</select>
</div>
<div class="prompt-q" data-qid="s3e5">
<div class="prompt-q-num">E5</div>
<div class="prompt-q-label">Anything unique about how you educate patients?</div>
<textarea data-s3-field name="s3_e5_unique" rows="3"></textarea>
</div>
</div>
</section>
</div>
<div class="action-bar">
<button class="btn-outline" id="btnSaveLater">Save & Continue Later</button>
<button class="btn-primary" id="btnNextSection" disabled>Next: Goals & Vision →</button>
</div>
</main>
</div>
</div><!-- /.wright-app-wrap -->
<!-- ============ SAVE & CONTINUE MODAL ============ -->
<div class="modal-backdrop" id="saveModal">
<div class="modal">
<h2>Save your progress</h2>
<div class="modal-sub">Your progress will be saved and you can return any time using your unique resume code.</div>
<div class="email-preview">
<div class="ep-head">Email preview</div>
<div class="ep-meta"><strong>To:</strong> <span id="emailTo">—</span></div>
<div class="ep-meta"><strong>From:</strong> Stephanie Wright <stephanie@stephaniewright.com></div>
<div class="ep-meta"><strong>Subject:</strong> Your w<span class="r-accent">R</span>ight Analysis — resume anytime</div>
<div class="ep-body">
Hi <span id="emailName">—</span>,<br><br>
You've saved your progress on <strong>The w<span class="r-accent">R</span>ight Analysis</strong>. Use the code below to pick up right where you left off.
</div>
</div>
<div class="resume-code-box">
<div class="code-label">Your resume code</div>
<div class="code" id="generatedCode">—</div>
</div>
<div class="ack-box">
<div class="ack-title">⚠ Important — please read</div>
<div class="ack-text">
Write down or screenshot this code before continuing. If you lose this code, <strong>all your progress will be lost</strong> and you'll have to start over.
</div>
<div class="field">
<label>Type your full name to acknowledge you've saved the code <span class="req">*</span></label>
<input type="text" id="ackName" placeholder="Type your full name here" />
</div>
</div>
<div style="display: flex; gap: 12px; justify-content: flex-end;">
<button class="btn-outline" id="btnCancelSave">Cancel</button>
<button class="btn-primary" id="btnConfirmSave" disabled>Confirm & Save</button>
</div>
</div>
</div>
<!-- ============ SAVE CONFIRMATION TOAST ============ -->
<div class="save-confirm" id="saveToast">✓ Progress saved</div>
<script>
// ============ STATE ============
const STORAGE_KEY = 'wrightAnalysisState_v1';
const CODE_MAP_KEY = 'wrightAnalysisCodes_v1';
const SECTIONS = [
{ num: 1, title: 'Practice Demographics & Overview' },
{ num: 2, title: 'Goals & Vision' },
{ num: 3, title: 'Care Model & Prevention Philosophy' },
{ num: 4, title: 'Marketing' },
{ num: 5, title: 'Operatories & Photos' },
{ num: 6, title: 'Major Equipment' },
{ num: 7, title: 'Team Structure & Comp' },
{ num: 8, title: 'Facility, Lease & Overhead' },
{ num: 9, title: 'Historical Data (5 yr / 12 mo)' },
{ num: 10, title: 'Annual Core Financials' },
{ num: 11, title: 'AR Aging' },
{ num: 12, title: 'Code Utilization & Referrals' },
{ num: 13, title: 'Technology & Systems' },
{ num: 14, title: 'Case Acceptance & Tx Planning' },
{ num: 15, title: 'Insurance Participation' },
{ num: 16, title: 'Scheduling & Capacity' }
];
let state = {
code: null,
name: '',
email: '',
currentSection: 1,
completedSections: [],
data: {}, // { section1: { field: value, ... }, ... }
logoDataUrl: null
};
// ============ UTIL ============
function $ (id) { return document.getElementById(id); }
function $$(sel) { return document.querySelectorAll(sel); }
function generateCode () {
const chars = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
let out = 'WRAN-';
for (let i = 0; i < 4; i++) out += chars[Math.floor(Math.random() * chars.length)];
out += '-';
for (let i = 0; i < 4; i++) out += chars[Math.floor(Math.random() * chars.length)];
return out;
}
function saveState () {
try {
const codes = JSON.parse(localStorage.getItem(CODE_MAP_KEY) || '{}');
codes[state.code] = state;
localStorage.setItem(CODE_MAP_KEY, JSON.stringify(codes));
} catch(e) { console.warn(e); }
}
function loadStateByCode (code) {
try {
const codes = JSON.parse(localStorage.getItem(CODE_MAP_KEY) || '{}');
return codes[code] || null;
} catch(e) { return null; }
}
function validEmail (e) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e); }
// ============ INTRO ============
$('btnNew').addEventListener('click', () => {
$('btnNew').classList.add('active');
$('btnResume').classList.remove('active');
$('newPanel').classList.remove('hide');
$('resumePanel').classList.add('hide');
});
$('btnResume').addEventListener('click', () => {
$('btnResume').classList.add('active');
$('btnNew').classList.remove('active');
$('resumePanel').classList.remove('hide');
$('newPanel').classList.add('hide');
});
$('btnBeginAudit').addEventListener('click', () => {
const name = $('introName').value.trim();
const email = $('introEmail').value.trim();
let ok = true;
if (!name) { $('err-introName').classList.add('show'); $('introName').classList.add('err'); ok = false; }
else { $('err-introName').classList.remove('show'); $('introName').classList.remove('err'); }
if (!validEmail(email)) { $('err-introEmail').classList.add('show'); $('introEmail').classList.add('err'); ok = false; }
else { $('err-introEmail').classList.remove('show'); $('introEmail').classList.remove('err'); }
if (!ok) return;
state.code = generateCode();
state.name = name;
state.email = email;
launchApp();
});
$('btnResumeAudit').addEventListener('click', () => {
const code = $('resumeCode').value.trim().toUpperCase();
const loaded = loadStateByCode(code);
if (!loaded) {
$('err-resumeCode').classList.add('show');
$('resumeCode').classList.add('err');
return;
}
state = loaded;
launchApp();
restoreFormData();
});
// ============ LAUNCH APP ============
function launchApp () {
$('intro').classList.add('hide');
$('app').classList.remove('hide');
$('userName').textContent = state.name;
$('userCode').textContent = state.code;
renderSidebar();
updateProgress();
if (state.logoDataUrl) showLogo(state.logoDataUrl);
// Jump to whatever section was last in progress
if (typeof showSection === 'function') {
showSection(state.currentSection || 1);
}
}
function renderSidebar () {
const nav = $('sectionNav');
nav.innerHTML = '';
SECTIONS.forEach(s => {
const li = document.createElement('li');
const isActive = s.num === state.currentSection;
const isDone = state.completedSections.includes(s.num);
const isAvailable = isDone || s.num === state.currentSection;
if (isActive) li.classList.add('active');
if (isDone) li.classList.add('completed');
if (isAvailable) li.classList.add('available');
li.innerHTML = `<span class="num">${s.num}</span><span>${s.title}</span>`;
if (isAvailable && typeof showSection === 'function') {
li.addEventListener('click', () => {
// Save current section before jumping
const current = state.currentSection;
const meta = SECTION_META && SECTION_META[current];
if (meta && meta.collector) {
state.data['section' + current] = meta.collector();
}
showSection(s.num);
});
}
nav.appendChild(li);
});
}
function updateProgress () {
const pct = (state.currentSection / SECTIONS.length) * 100;
$('progressFill').style.width = pct + '%';
$('progressLabel').textContent = `Section ${state.currentSection} of ${SECTIONS.length}`;
}
// ============ CONDITIONAL LOGIC ============
$('buildingOwnership').addEventListener('change', (e) => {
$('leaseDetails').classList.toggle('hide', e.target.value !== 'Leased');
validateSection();
});
$('acquisition').addEventListener('change', (e) => {
$('acquisitionDetails').classList.toggle('hide', !e.target.value || e.target.value === 'Startup from scratch');
validateSection();
});
// ============ OPERATORY RECONCILIATION ============
function updateOpsTotals () {
const inUse = +$('opsInUse').value || 0;
const plumbed = +$('opsPlumbed').value || 0;
const hygRaw = $('opsHyg').value.trim();
const drRaw = $('opsDr').value.trim();
const dualRaw = $('opsDual').value.trim();
const hyg = +hygRaw || 0;
const dr = +drRaw || 0;
const dual = +dualRaw || 0;
const total = inUse + plumbed;
$('totalOpsValue').textContent = total;
const equippedSum = hyg + dr + dual;
const userStartedEquipped = hygRaw !== '' || drRaw !== '' || dualRaw !== '';
const recon = $('opReconDisplay');
$('opReconValue').textContent = `${equippedSum} / ${inUse}`;
if (!userStartedEquipped) {
// User hasn't entered anything — stay neutral
recon.classList.remove('err'); recon.classList.add('ok');
recon.firstElementChild.textContent = 'Equipped ops breakdown (optional)';
} else if (inUse === 0 && equippedSum === 0) {
recon.classList.remove('err'); recon.classList.add('ok');
recon.firstElementChild.textContent = 'Equipped ops total matches in-use total';
} else if (equippedSum === inUse) {
recon.classList.remove('err'); recon.classList.add('ok');
recon.firstElementChild.textContent = '✓ Equipped ops total matches in-use total';
} else {
recon.classList.remove('ok'); recon.classList.add('err');
const diff = equippedSum - inUse;
recon.firstElementChild.textContent = diff > 0
? `Equipped ops sum is ${diff} over your in-use total`
: `Equipped ops sum is ${Math.abs(diff)} under your in-use total`;
}
validateSection();
}
['opsInUse','opsPlumbed','opsHyg','opsDr','opsDual'].forEach(id => {
$(id).addEventListener('input', updateOpsTotals);
});
// ============ OWNERS ============
$('ownerCount').addEventListener('input', (e) => {
const n = Math.max(0, Math.min(20, +e.target.value || 0));
renderOwners(n);
validateSection();
});
function renderOwners (n) {
const container = $('ownersContainer');
// preserve existing values
const existing = [];
container.querySelectorAll('.owner-card').forEach(card => {
const obj = {};
card.querySelectorAll('[data-owner-field]').forEach(f => {
obj[f.dataset.ownerField] = f.value;
});
existing.push(obj);
});
container.innerHTML = '';
if (n === 0) {
$('ownershipTotal').classList.add('hide');
return;
}
$('ownershipTotal').classList.remove('hide');
for (let i = 0; i < n; i++) {
const prev = existing[i] || {};
const card = document.createElement('div');
card.className = 'owner-card';
card.innerHTML = `
<div class="owner-head">
<div class="owner-label">Owner ${i + 1}</div>
</div>
<div class="grid-2">
<div class="field">
<label>Full name <span class="req">*</span></label>
<input type="text" data-owner-field="name" data-req-owner value="${prev.name || ''}" />
</div>
<div class="field">
<label>Preferred name <span style="font-weight: 400; color: var(--muted);">(optional)</span></label>
<input type="text" data-owner-field="preferred" value="${prev.preferred || ''}" />
</div>
</div>
<div class="grid-2">
<div class="field">
<label>Cell phone <span class="req">*</span></label>
<input type="tel" data-owner-field="cell" data-req-owner value="${prev.cell || ''}" />
</div>
<div class="field">
<label>Preferred email <span class="req">*</span></label>
<input type="email" data-owner-field="email" data-req-owner value="${prev.email || ''}" />
</div>
</div>
<div class="grid-3">
<div class="field">
<label>% of ownership <span class="req">*</span></label>
<input type="number" data-owner-field="ownPct" data-req-owner class="own-pct" min="0" max="100" step="0.01" value="${prev.ownPct || ''}" />
</div>
<div class="field">
<label>Year graduated <span class="req">*</span></label>
<input type="number" data-owner-field="yearGrad" data-req-owner min="1900" max="2100" step="1" value="${prev.yearGrad || ''}" />
</div>
<div class="field">
<label>Year started at practice <span class="req">*</span></label>
<input type="number" data-owner-field="yearStart" data-req-owner min="1900" max="2100" step="1" value="${prev.yearStart || ''}" />
</div>
</div>
<div class="grid-2">
<div class="field">
<label>Year became owner here <span class="req">*</span></label>
<input type="number" data-owner-field="yearOwner" data-req-owner min="1900" max="2100" step="1" value="${prev.yearOwner || ''}" />
</div>
<div class="field">
<label>Specialty <span class="req">*</span></label>
<select data-owner-field="specialty" data-req-owner>
<option value="">Select one…</option>
${['General','Pediatric','Periodontic','Orthodontic','Oral Surgery','Endodontic','Prosthodontic','Dental Hygiene']
.map(s => `<option ${prev.specialty===s?'selected':''}>${s}</option>`).join('')}
</select>
</div>
</div>
<div class="field">
<label>Additional certifications, awards, fellowships & advanced training</label>
<textarea data-owner-field="certs" rows="3" placeholder="List certifications, fellowships, awards, and advanced training you personally hold and that you offer at the practice.">${prev.certs || ''}</textarea>
</div>
`;
container.appendChild(card);
}
// re-bind listeners
container.querySelectorAll('[data-owner-field]').forEach(f => {
f.addEventListener('input', () => { updateOwnershipTotal(); validateSection(); });
f.addEventListener('change', () => { updateOwnershipTotal(); validateSection(); });
});
updateOwnershipTotal();
}
function updateOwnershipTotal () {
const pcts = Array.from(document.querySelectorAll('.own-pct')).map(i => +i.value || 0);
const total = pcts.reduce((a,b)=>a+b, 0);
const el = $('ownershipTotal');
const val = $('ownershipTotalValue');
const rounded = Math.round(total * 100) / 100;
if (rounded === 100) {
el.classList.remove('warn'); el.classList.add('ok');
val.textContent = '✓ 100% — complete';
} else {
el.classList.remove('ok'); el.classList.add('warn');
const diff = 100 - rounded;
val.textContent = rounded + '% — needs ' + (diff > 0 ? (diff + '% more') : (Math.abs(diff) + '% less'));
}
}
// ============ LOGO UPLOAD ============
$('logoFile').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
state.logoDataUrl = ev.target.result;
showLogo(ev.target.result);
};
reader.readAsDataURL(file);
});
function showLogo (dataUrl) {
$('logoPreview').src = dataUrl;
$('logoEmpty').classList.add('hide');
$('logoFilled').classList.remove('hide');
$('logoUpload').classList.add('has-logo');
// Also in sidebar
$('clientLogoImg').src = dataUrl;
$('clientLogoName').textContent = state.name;
$('clientLogoWrap').classList.add('show');
}
// ============ VALIDATION ============
function validateSection () {
// Only enforce validation on Section 1; other sections are optional
if (state.currentSection !== 1) {
$('btnNextSection').disabled = false;
return true;
}
let ok = true;
// Required core fields
$$('#section-1 [data-req]').forEach(f => {
if (!f.value.trim()) ok = false;
});
// Conditional: lease details
if ($('buildingOwnership').value === 'Leased') {
$$('#section-1 [data-req-lease]').forEach(f => { if (!f.value.trim()) ok = false; });
}
// Conditional: acquisition details
const acq = $('acquisition').value;
if (acq && acq !== 'Startup from scratch') {
$$('#section-1 [data-req-acq]').forEach(f => { if (!f.value.trim()) ok = false; });
}
// Owners
const ownerN = +$('ownerCount').value || 0;
if (ownerN > 0) {
$$('[data-req-owner]').forEach(f => { if (!f.value.trim()) ok = false; });
const pcts = Array.from(document.querySelectorAll('.own-pct')).map(i => +i.value || 0);
const total = pcts.reduce((a,b)=>a+b, 0);
if (Math.round(total * 100) / 100 !== 100) ok = false;
}
// Ops reconciliation: only enforce if user has entered any equipped ops
const inUse = +$('opsInUse').value || 0;
const hygVal = $('opsHyg').value.trim();
const drVal = $('opsDr').value.trim();
const dualVal = $('opsDual').value.trim();
const userStartedEquipped = hygVal !== '' || drVal !== '' || dualVal !== '';
if (inUse > 0 && userStartedEquipped) {
const equipped = (+hygVal || 0) + (+drVal || 0) + (+dualVal || 0);
if (equipped !== inUse) ok = false;
}
$('btnNextSection').disabled = !ok;
return ok;
}
// validate on any input
document.addEventListener('input', validateSection);
document.addEventListener('change', validateSection);
// ============ COLLECT SECTION DATA ============
function collectSection1 () {
const data = {};
$$('#section-1 input, #section-1 select, #section-1 textarea').forEach(f => {
if (f.name) data[f.name] = f.value;
});
// Owners
const owners = [];
$$('.owner-card').forEach(card => {
const o = {};
card.querySelectorAll('[data-owner-field]').forEach(f => {
o[f.dataset.ownerField] = f.value;
});
owners.push(o);
});
data.ownerCount = +$('ownerCount').value || 0;
data.owners = owners;
data.logoUploaded = !!state.logoDataUrl;
return data;
}
function restoreFormData () {
const d = state.data.section1 || {};
$$('#section-1 input, #section-1 select, #section-1 textarea').forEach(f => {
if (f.name && d[f.name] != null) f.value = d[f.name];
});
if (d.ownerCount) {
$('ownerCount').value = d.ownerCount;
renderOwners(d.ownerCount);
if (d.owners) {
const cards = document.querySelectorAll('.owner-card');
d.owners.forEach((o, i) => {
if (cards[i]) {
cards[i].querySelectorAll('[data-owner-field]').forEach(f => {
if (o[f.dataset.ownerField] != null) f.value = o[f.dataset.ownerField];
});
}
});
}
updateOwnershipTotal();
}
// trigger conditional displays
if ($('buildingOwnership').value === 'Leased') $('leaseDetails').classList.remove('hide');
const acq = $('acquisition').value;
if (acq && acq !== 'Startup from scratch') $('acquisitionDetails').classList.remove('hide');
updateOpsTotals();
validateSection();
// Restore Section 2
const s2 = state.data.section2;
if (s2 && s2.answers) {
document.querySelectorAll('#section-2 .prompt-q').forEach(q => {
const qid = q.dataset.qid;
const field = q.querySelector('[data-q2-field]');
const skipBox = q.querySelector(`[data-skip-for="${qid}"]`);
if (s2.skipped && s2.skipped[qid] && skipBox) {
skipBox.checked = true;
skipBox.dispatchEvent(new Event('change'));
} else if (field && s2.answers[qid] != null && s2.answers[qid] !== '__SKIPPED__') {
field.value = s2.answers[qid];
}
});
if (typeof updateQ2Counter === 'function') updateQ2Counter();
}
// Restore Section 3
const s3 = state.data.section3;
if (s3) {
// Plain fields (input/select/textarea)
document.querySelectorAll('#section-3 [data-s3-field]').forEach(f => {
if (f.name && s3[f.name] != null) f.value = s3[f.name];
});
// Checkbox groups
document.querySelectorAll('#section-3 [data-s3-check]').forEach(cb => {
const key = cb.dataset.s3Check;
if (Array.isArray(s3[key]) && s3[key].includes(cb.value)) {
cb.checked = true;
}
});
// Trigger conditional reveal for D1 → D2
const d1 = document.getElementById('s3d1Select');
if (d1 && d1.value === 'every-x') {
document.getElementById('s3d2Block').classList.remove('hide');
document.getElementById('s3d1XYears').classList.remove('hide');
}
}
}
// ============ SAVE & CONTINUE MODAL ============
$('btnSaveLater').addEventListener('click', () => {
const current = state.currentSection;
const meta = SECTION_META[current];
if (meta && meta.collector) {
state.data['section' + current] = meta.collector();
}
$('emailTo').textContent = state.email;
$('emailName').textContent = state.name.split(' ')[0];
$('generatedCode').textContent = state.code;
$('ackName').value = '';
$('btnConfirmSave').disabled = true;
$('saveModal').classList.add('show');
});
$('ackName').addEventListener('input', (e) => {
const typed = e.target.value.trim().toLowerCase();
const name = state.name.trim().toLowerCase();
$('btnConfirmSave').disabled = typed !== name || typed.length === 0;
});
$('btnCancelSave').addEventListener('click', () => {
$('saveModal').classList.remove('show');
});
$('btnConfirmSave').addEventListener('click', () => {
saveState();
$('saveModal').classList.remove('show');
const toast = $('saveToast');
toast.textContent = '✓ Progress saved — your code is ' + state.code;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 4000);
});
// ============ NEXT SECTION / SECTION ROUTING ============
const SECTION_META = {
1: { id: 'section-1', nextLabel: 'Next: Goals & Vision →', validator: validateSection1, collector: collectSection1 },
2: { id: 'section-2', nextLabel: 'Next: Care Model & Prevention →', validator: () => true, collector: collectSection2 },
3: { id: 'section-3', nextLabel: 'Next: Marketing →', validator: () => true, collector: collectSection3 },
// sections 4-16 will be added as we build them
};
function validateSection1 () {
// Wraps the existing validateSection for section 1
return !$('btnNextSection').disabled;
}
function collectSection2 () {
const data = {};
const skipped = {};
document.querySelectorAll('#section-2 .prompt-q').forEach(q => {
const qid = q.dataset.qid;
const skipBox = q.querySelector(`[data-skip-for="${qid}"]`);
if (skipBox && skipBox.checked) {
skipped[qid] = true;
data[qid] = '__SKIPPED__';
} else {
const field = q.querySelector('[data-q2-field]');
data[qid] = field ? field.value.trim() : '';
}
});
return { answers: data, skipped };
}
function collectSection3 () {
const data = {};
// Collect all plain fields (input, select, textarea with data-s3-field)
document.querySelectorAll('#section-3 [data-s3-field]').forEach(f => {
if (f.name) data[f.name] = f.value.trim();
});
// Collect checkbox groups (grouped by data-s3-check name)
const groups = {};
document.querySelectorAll('#section-3 [data-s3-check]').forEach(cb => {
const key = cb.dataset.s3Check;
if (!groups[key]) groups[key] = [];
if (cb.checked) groups[key].push(cb.value);
});
Object.keys(groups).forEach(k => { data[k] = groups[k]; });
return data;
}
function showSection (num) {
// Hide all sections
document.querySelectorAll('#sectionContent > section').forEach(s => s.classList.add('hide'));
const target = document.getElementById(`section-${num}`);
if (target) target.classList.remove('hide');
state.currentSection = num;
updateProgress();
renderSidebar();
// Update Next button label
const meta = SECTION_META[num];
if (meta) {
$('btnNextSection').innerHTML = meta.nextLabel;
}
// Re-run appropriate validation
if (num === 1) {
validateSection();
} else {
// For other sections, Next is always enabled (optional content)
$('btnNextSection').disabled = false;
}
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
}
$('btnNextSection').addEventListener('click', () => {
const current = state.currentSection;
const meta = SECTION_META[current];
if (!meta) return;
// Collect data from current section
if (meta.collector) {
state.data['section' + current] = meta.collector();
}
// Mark complete
if (!state.completedSections.includes(current)) state.completedSections.push(current);
saveState();
// Move to next
const next = current + 1;
if (SECTION_META[next]) {
showSection(next);
} else {
alert(`✓ Section ${current} complete!\n\nThis is where Section ${next} would begin. We'll build that next — after you've confirmed Section ${current} looks right.`);
}
});
// ============ SECTION 2: SKIP CHECKBOX LOGIC ============
document.querySelectorAll('[data-skip-for]').forEach(cb => {
cb.addEventListener('change', (e) => {
const qid = e.target.dataset.skipFor;
const q = document.querySelector(`#section-2 .prompt-q[data-qid="${qid}"]`);
if (!q) return;
const field = q.querySelector('[data-q2-field]');
if (!field) return;
if (e.target.checked) {
field.dataset.prevValue = field.value;
field.value = 'Prefer not to answer';
field.classList.add('skipped');
field.setAttribute('readonly', 'readonly');
} else {
field.value = field.dataset.prevValue || '';
field.classList.remove('skipped');
field.removeAttribute('readonly');
}
updateQ2Counter();
});
});
// ============ SECTION 2: ANSWER COUNTER ============
function updateQ2Counter () {
let count = 0;
document.querySelectorAll('#section-2 .prompt-q').forEach(q => {
const qid = q.dataset.qid;
const skipBox = q.querySelector(`[data-skip-for="${qid}"]`);
const field = q.querySelector('[data-q2-field]');
if (skipBox && skipBox.checked) {
count++;
} else if (field && field.value && field.value.trim() !== '' && field.value !== 'Prefer not to answer') {
count++;
}
});
const el = $('q2AnsweredCount');
if (el) el.textContent = `${count} of 32`;
}
document.querySelectorAll('#section-2 [data-q2-field]').forEach(f => {
f.addEventListener('input', updateQ2Counter);
f.addEventListener('change', updateQ2Counter);
});
// ============ SECTION 3: CONDITIONAL D1 → D2 ============
(function wireSection3 () {
const s3d1 = document.getElementById('s3d1Select');
const s3d2Block = document.getElementById('s3d2Block');
const s3d1XYears = document.getElementById('s3d1XYears');
if (!s3d1 || !s3d2Block) return;
s3d1.addEventListener('change', (e) => {
const showBoth = e.target.value === 'every-x';
s3d2Block.classList.toggle('hide', !showBoth);
s3d1XYears.classList.toggle('hide', !showBoth);
});
})();
// ============ INIT ============
renderOwners(0);
updateOpsTotals();
validateSection();
updateQ2Counter();
</script>
</body>
</html>
