c2141a127a
- Remove 'coverage' from worklist description across all docs - Add whitepaper v2, documentation gap whitepaper, gate demo, sample - Add TERAX.md, Claude Code settings, test-data generator - Add settings.local.json to .gitignore Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
307 lines
13 KiB
HTML
307 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Whitepaper Gate — Demo</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background: #D6CFC6;
|
|
min-height: 100vh;
|
|
padding: 40px 16px;
|
|
}
|
|
.page {
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
background: #F0EAE1;
|
|
box-shadow: 0 4px 32px rgba(0,0,0,0.12);
|
|
}
|
|
.top-bar { height: 5px; background: #2EA3A3; }
|
|
|
|
/* Nav */
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18px 40px;
|
|
border-bottom: 1px solid rgba(4,26,26,0.08);
|
|
}
|
|
.nav-brand { font-size: 11px; font-weight: 700; color: #8AABAB; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
|
|
.nav-back { font-size: 13px; color: #3A5E5E; text-decoration: none; }
|
|
.nav-back:hover { color: #2EA3A3; }
|
|
|
|
/* ── STATE 1: Teaser ── */
|
|
#state-teaser { padding: 52px 48px 56px; }
|
|
.eyebrow {
|
|
font-size: 11px; font-weight: 700; color: #2EA3A3;
|
|
letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: 16px;
|
|
}
|
|
.title {
|
|
font-size: 36px; font-weight: 800; color: #041A1A;
|
|
line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px;
|
|
}
|
|
.subtitle {
|
|
font-size: 16px; color: #3A5E5E; line-height: 1.65;
|
|
max-width: 520px; margin-bottom: 36px;
|
|
}
|
|
.stat-row {
|
|
display: grid; grid-template-columns: 1fr 1fr;
|
|
gap: 12px; margin-bottom: 44px;
|
|
}
|
|
.stat-card {
|
|
background: rgba(26,80,80,0.06);
|
|
border: 1px solid rgba(26,80,80,0.12);
|
|
border-radius: 6px; padding: 18px 20px;
|
|
}
|
|
.stat-n { font-size: 28px; font-weight: 800; color: #1A5050; line-height: 1; margin-bottom: 6px; }
|
|
.stat-l { font-size: 13px; color: #3A5E5E; line-height: 1.4; }
|
|
.stat-s { font-size: 11px; color: #8AABAB; margin-top: 4px; font-style: italic; }
|
|
|
|
/* THE button */
|
|
.btn-read {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
background: #1A5050; color: #F0EAE1;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
|
|
padding: 16px 32px; border-radius: 4px; border: none;
|
|
cursor: pointer; transition: background 0.15s;
|
|
}
|
|
.btn-read:hover { background: #041A1A; }
|
|
.btn-read svg { transition: transform 0.15s; }
|
|
.btn-read:hover svg { transform: translateX(3px); }
|
|
.btn-note {
|
|
margin-top: 12px; font-size: 12px; color: #8AABAB; letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ── STATE 2: Form ── */
|
|
#state-form { display: none; padding: 52px 48px 56px; }
|
|
.form-eyebrow { font-size: 11px; font-weight: 700; color: #2EA3A3; letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: 14px; }
|
|
.form-title { font-size: 24px; font-weight: 700; color: #041A1A; margin-bottom: 8px; }
|
|
.form-sub { font-size: 15px; color: #3A5E5E; line-height: 1.6; margin-bottom: 32px; }
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
|
|
.form-field { display: flex; flex-direction: column; gap: 6px; }
|
|
.form-field.full { grid-column: 1 / -1; }
|
|
label { font-size: 12px; font-weight: 600; color: #1A5050; letter-spacing: 0.06em; text-transform: uppercase; }
|
|
input, select {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 15px; padding: 11px 14px;
|
|
border: 1px solid rgba(4,26,26,0.18); border-radius: 4px;
|
|
background: #F8F4EE; color: #1A1A1A; outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
input:focus, select:focus { border-color: #2EA3A3; }
|
|
select { cursor: pointer; }
|
|
.btn-submit {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
background: #1A5050; color: #F0EAE1;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
|
|
padding: 16px 32px; border-radius: 4px; border: none;
|
|
cursor: pointer; margin-top: 8px; transition: background 0.15s;
|
|
width: 100%; justify-content: center;
|
|
}
|
|
.btn-submit:hover { background: #041A1A; }
|
|
.privacy-note { font-size: 12px; color: #8AABAB; margin-top: 12px; text-align: center; line-height: 1.5; }
|
|
|
|
/* ── STATE 3: Whitepaper revealed ── */
|
|
#state-whitepaper { display: none; }
|
|
.wp-confirmed {
|
|
background: #1A5050; padding: 20px 48px;
|
|
display: flex; align-items: center; gap: 14px;
|
|
}
|
|
.wp-confirmed-text { font-size: 14px; font-weight: 600; color: #F0EAE1; }
|
|
.wp-confirmed-name { color: #8AABAB; font-weight: 400; }
|
|
.check-circle {
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
background: rgba(240,234,225,0.15);
|
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
}
|
|
/* Whitepaper content — abbreviated for demo */
|
|
.wp-content { padding: 48px 48px 56px; }
|
|
.wp-content h2 {
|
|
font-size: 11px; font-weight: 700; color: #2EA3A3;
|
|
letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: 12px;
|
|
}
|
|
.wp-section-title { font-size: 24px; font-weight: 700; color: #1A5050; margin-bottom: 16px; }
|
|
.wp-content p { font-size: 15px; color: #2D2D2D; line-height: 1.75; margin-bottom: 14px; }
|
|
.stat-callout {
|
|
background: #1A5050; border-radius: 4px; padding: 28px 36px;
|
|
margin: 28px 0; position: relative;
|
|
}
|
|
.stat-callout::before {
|
|
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
|
width: 4px; background: #CB6B20; border-radius: 4px 0 0 4px;
|
|
}
|
|
.sc-num { font-size: 56px; font-weight: 800; color: #F0EAE1; line-height: 1; margin-bottom: 8px; }
|
|
.sc-label { font-size: 14px; font-weight: 500; color: rgba(240,234,225,0.85); line-height: 1.6; max-width: 420px; margin-bottom: 10px; }
|
|
.sc-source { font-size: 11px; font-weight: 600; color: #8AABAB; letter-spacing: 0.12em; text-transform: uppercase; }
|
|
.demo-note {
|
|
background: rgba(203,107,32,0.08); border: 1px dashed rgba(203,107,32,0.35);
|
|
border-radius: 4px; padding: 14px 18px; margin-top: 36px;
|
|
font-size: 13px; color: #CB6B20; line-height: 1.5; text-align: center;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
border-top: 1px solid rgba(4,26,26,0.08);
|
|
padding: 20px 40px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.footer-brand { font-size: 11px; font-weight: 700; color: #8AABAB; letter-spacing: 0.16em; text-transform: uppercase; }
|
|
.footer-url { font-size: 11px; color: #8AABAB; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
<div class="top-bar"></div>
|
|
|
|
<nav class="nav">
|
|
<a class="nav-brand" href="#">STTIL Solutions</a>
|
|
<a class="nav-back" href="#">← Back to Signal</a>
|
|
</nav>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
STATE 1 — Teaser + "Read the Whitepaper" button
|
|
(This is what every visitor sees first)
|
|
══════════════════════════════════════════════ -->
|
|
<div id="state-teaser">
|
|
<div class="eyebrow">Whitepaper</div>
|
|
<h1 class="title">The Documentation Gap</h1>
|
|
<p class="subtitle">Why CGM claim performance is decided before claims submission. A reference guide for CGM suppliers, RCM teams, and billing professionals.</p>
|
|
|
|
<div class="stat-row">
|
|
<div class="stat-card">
|
|
<div class="stat-n">67.6%</div>
|
|
<div class="stat-l">of improper payments attributed to absent documentation</div>
|
|
<div class="stat-s">CMS, 2024</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-n">5</div>
|
|
<div class="stat-l">upstream checkpoints where documentation gaps form before billing</div>
|
|
<div class="stat-s">Signal framework</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-read" onclick="showForm()">
|
|
Read the Whitepaper
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M3 8h10M9 4l4 4-4 4" stroke="#F0EAE1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="btn-note">Free. Takes 30 seconds to access.</div>
|
|
</div>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
STATE 2 — Short form
|
|
(Appears after clicking "Read the Whitepaper")
|
|
══════════════════════════════════════════════ -->
|
|
<div id="state-form">
|
|
<div class="form-eyebrow">One quick step</div>
|
|
<h2 class="form-title">Who should we address this to?</h2>
|
|
<p class="form-sub">Enter your details below and the whitepaper opens immediately.</p>
|
|
|
|
<form onsubmit="showWhitepaper(event)">
|
|
<div class="form-grid">
|
|
<div class="form-field">
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" placeholder="Your name" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="email">Work Email</label>
|
|
<input type="email" id="email" placeholder="you@yourcompany.com" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="org">Organization</label>
|
|
<input type="text" id="org" placeholder="Company name" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="role">Role</label>
|
|
<select id="role" required>
|
|
<option value="" disabled selected>Select your role</option>
|
|
<option>Supplier Owner / Operator</option>
|
|
<option>Billing Manager</option>
|
|
<option>RCM Director / Lead</option>
|
|
<option>Billing Company</option>
|
|
<option>Compliance Officer</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn-submit">
|
|
Open the Whitepaper
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M3 8h10M9 4l4 4-4 4" stroke="#F0EAE1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<p class="privacy-note">Your information is used only to share relevant Signal updates. No spam.</p>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
STATE 3 — Whitepaper revealed inline
|
|
(Appears after form submit)
|
|
══════════════════════════════════════════════ -->
|
|
<div id="state-whitepaper">
|
|
<div class="wp-confirmed">
|
|
<div class="check-circle">
|
|
<svg width="14" height="11" viewBox="0 0 14 11" fill="none">
|
|
<path d="M1 5.5l4 4L13 1" stroke="#F0EAE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="wp-confirmed-text">
|
|
Sent to <span class="wp-confirmed-name" id="confirmed-email"></span> — the whitepaper is below.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wp-content">
|
|
<h2>Overview</h2>
|
|
<div class="wp-section-title">The Core Problem</div>
|
|
<p>Clean claim performance in CGM is not primarily a billing problem. It is a documentation problem, and the gap opens upstream, not at claims submission.</p>
|
|
<p>Centers for Medicare & Medicaid Services (CMS) compliance reporting is clear:</p>
|
|
|
|
<div class="stat-callout">
|
|
<div class="sc-num">67.6%</div>
|
|
<div class="sc-label">of improper payments for glucose monitoring supplies during the 2024 reporting period were attributed to missing documentation. Not insufficient. Absent. The documentation records were unable to be created, collected, or verified before the CGM claim was filed.</div>
|
|
<div class="sc-source">CMS Glucose Monitoring Supplies Compliance Tip, February 2026</div>
|
|
</div>
|
|
|
|
<p>By the time a denial, write-off, or audit flag appears in your billing queue, capital exposure is already at risk. The window to address it closed before the supplies left the building.</p>
|
|
|
|
<div class="demo-note">
|
|
Demo shows first section only. Full whitepaper renders here after form submit.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<span class="footer-brand">STTIL Solutions</span>
|
|
<span class="footer-url">sttilsolutions.com</span>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
function showForm() {
|
|
document.getElementById('state-teaser').style.display = 'none';
|
|
document.getElementById('state-form').style.display = 'block';
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
function showWhitepaper(e) {
|
|
e.preventDefault();
|
|
const email = document.getElementById('email').value;
|
|
document.getElementById('confirmed-email').textContent = email;
|
|
document.getElementById('state-form').style.display = 'none';
|
|
document.getElementById('state-whitepaper').style.display = 'block';
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|