Skip to content

Instantly share code, notes, and snippets.

@boringmarketer

boringmarketer/boring-marketing-landing-v17.html

Created January 10, 2026 16:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save boringmarketer/cfc4925372e779ecf541b8c0f9bffbca to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save boringmarketer/cfc4925372e779ecf541b8c0f9bffbca to your computer and use it in GitHub Desktop.
Download ZIP
Boring Marketing Landing Page v17 & Prototype
Raw
boring-marketing-landing-v17.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boring Marketing - The Dashboard Era Is Over</title>
<!-- Fonts -->
<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=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* =================================================================
V17 - CATEGORY DEFINING
The dashboard era is over. This is what comes next.
================================================================= */
:root {
/* Typography */
--font-display: "Fraunces", Georgia, serif;
--font-body: "Plus Jakarta Sans", -apple-system, sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* Paper Foundation */
--paper: #f8f7f4;
--paper-warm: #f5f3ef;
--paper-deep: #eae8e3;
--ink: #0a0a0a;
--ink-secondary: #1a1a1a;
--ink-tertiary: #525252;
--ink-muted: #8a8a8a;
--surface: #ffffff;
--surface-elevated: #fefefe;
--border: #e5e4e0;
--border-subtle: #efefed;
/* Dark mode for dramatic sections */
--dark-bg: #0a0a0a;
--dark-surface: #141414;
--dark-surface-elevated: #1a1a1a;
--dark-border: #2a2a2a;
--dark-text: #f5f5f5;
--dark-text-secondary: #a3a3a3;
--dark-text-muted: #737373;
/* Amber System */
--amber: #d97706;
--amber-dark: #b45309;
--amber-deep: #92400e;
--amber-light: #fef3c7;
--amber-glow: rgba(217, 119, 6, 0.15);
--amber-glow-strong: rgba(217, 119, 6, 0.25);
/* Signal Colors */
--signal-growth: #16a34a;
--signal-growth-light: #22c55e;
--signal-win: #0284c7;
--signal-win-light: #38bdf8;
--signal-threat: #dc2626;
--signal-threat-light: #f87171;
--signal-trend: #7c3aed;
--signal-trend-light: #a78bfa;
--signal-drift: #d97706;
/* Surface Colors for Dollar Values */
--google: #4285f4;
--aio: #34a853;
--chatgpt: #10a37f;
--perplexity: #1a73e8;
/* Prismatic */
--prismatic: linear-gradient(135deg,
rgba(251, 191, 36, 0.08),
rgba(244, 114, 182, 0.06),
rgba(168, 85, 247, 0.08),
rgba(59, 130, 246, 0.06));
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
--shadow-xl: 0 24px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);
--shadow-dramatic: 0 32px 80px rgba(0,0,0,0.16), 0 12px 32px rgba(0,0,0,0.08);
--shadow-amber: 0 8px 32px rgba(217, 119, 6, 0.25);
--shadow-amber-lg: 0 16px 48px rgba(217, 119, 6, 0.35);
/* Layout */
--max-width: 1200px;
--radius: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
/* Animation */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Subtle grain texture */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.015;
pointer-events: none;
z-index: 9999;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0;
}
p { margin: 0; }
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 2rem;
}
/* =================================================================
NAV - Minimal & Confident
================================================================= */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(248, 247, 244, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 2rem;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
}
.nav-logo-icon {
width: 28px;
height: 28px;
object-fit: contain;
}
.nav-name {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
}
.nav-links {
display: flex;
align-items: center;
gap: 2.5rem;
}
.nav-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-tertiary);
text-decoration: none;
transition: color 0.2s;
}
.nav-link:hover { color: var(--ink); }
.nav-cta {
font-size: 0.875rem;
font-weight: 600;
color: var(--surface);
background: var(--ink);
padding: 0.625rem 1.25rem;
border-radius: 8px;
text-decoration: none;
transition: all 0.25s var(--ease-out);
}
.nav-cta:hover {
background: var(--amber);
transform: translateY(-1px);
}
/* =================================================================
HERO - Category Defining Statement
================================================================= */
.hero {
min-height: 100vh;
padding: 8rem 2rem 6rem;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
/* Dramatic gradient backdrop */
.hero::before {
content: '';
position: absolute;
top: 0;
right: -20%;
width: 80%;
height: 120%;
background: radial-gradient(ellipse at 70% 30%,
rgba(217, 119, 6, 0.08) 0%,
rgba(251, 191, 36, 0.04) 30%,
transparent 70%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -20%;
left: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse at 30% 70%,
rgba(124, 58, 237, 0.04) 0%,
transparent 60%);
pointer-events: none;
}
.hero-inner {
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 6rem;
align-items: center;
}
.hero-content {
max-width: 600px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
color: var(--amber);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
background: var(--amber-glow);
border: 1px solid rgba(217, 119, 6, 0.2);
border-radius: 100px;
opacity: 0;
animation: fadeUp 0.8s var(--ease-out) forwards;
}
.hero-eyebrow::before {
content: '';
width: 6px;
height: 6px;
background: var(--amber);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
.hero-headline {
font-size: clamp(2.75rem, 5.5vw, 4.25rem);
font-weight: 400;
line-height: 1.02;
margin-bottom: 1.75rem;
opacity: 0;
animation: fadeUp 0.8s var(--ease-out) 0.1s forwards;
}
.hero-headline-line {
display: block;
}
.hero-headline em {
font-style: italic;
font-weight: 500;
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-headline-small {
font-size: 0.7em;
color: var(--ink-tertiary);
font-weight: 300;
}
.hero-subhead {
font-size: 1.1875rem;
color: var(--ink-secondary);
line-height: 1.7;
margin-bottom: 2.5rem;
opacity: 0;
animation: fadeUp 0.8s var(--ease-out) 0.2s forwards;
}
.hero-subhead strong {
color: var(--ink);
font-weight: 600;
}
.hero-ctas {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
opacity: 0;
animation: fadeUp 0.8s var(--ease-out) 0.3s forwards;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 1rem;
font-weight: 600;
color: white;
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
padding: 1.125rem 2rem;
border-radius: var(--radius);
text-decoration: none;
transition: all 0.3s var(--ease-out);
box-shadow: var(--shadow-amber);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-amber-lg);
}
.btn-primary:hover::before {
opacity: 1;
}
.btn-primary svg {
transition: transform 0.2s;
}
.btn-primary:hover svg {
transform: translateX(4px);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--ink);
background: transparent;
border: 1.5px solid var(--border);
padding: 1rem 1.75rem;
border-radius: var(--radius);
text-decoration: none;
transition: all 0.2s;
}
.btn-secondary:hover {
border-color: var(--ink);
background: var(--surface);
}
.hero-proof {
display: flex;
align-items: center;
gap: 1.5rem;
font-size: 0.875rem;
color: var(--ink-muted);
opacity: 0;
animation: fadeUp 0.8s var(--ease-out) 0.4s forwards;
}
.hero-proof-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hero-proof-dot {
width: 6px;
height: 6px;
background: var(--signal-growth);
border-radius: 50%;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hero Visual - Product Preview */
.hero-visual {
position: relative;
opacity: 0;
animation: fadeUp 1s var(--ease-out) 0.4s forwards;
}
.hero-preview {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--dark-bg);
box-shadow: var(--shadow-dramatic);
border: 1px solid var(--dark-border);
}
/* Prismatic border effect */
.hero-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--signal-growth),
var(--signal-win),
var(--signal-trend),
var(--amber));
z-index: 10;
}
.hero-preview-inner {
padding: 1.5rem;
}
/* Mini Brief Preview */
.mini-brief {
display: flex;
flex-direction: column;
gap: 1rem;
}
.mini-brief-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
border-bottom: 1px solid var(--dark-border);
}
.mini-brief-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--dark-text);
}
.mini-brief-time {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--dark-text-muted);
}
.mini-opportunity {
background: var(--dark-surface);
border: 1px solid var(--dark-border);
border-radius: var(--radius);
padding: 1rem;
display: flex;
align-items: flex-start;
gap: 0.875rem;
transition: all 0.2s;
}
.mini-opportunity:hover {
border-color: var(--amber);
transform: translateX(4px);
}
.mini-opp-signal {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mini-opp-signal.growth {
background: rgba(22, 163, 74, 0.15);
color: var(--signal-growth-light);
}
.mini-opp-signal.win {
background: rgba(2, 132, 199, 0.15);
color: var(--signal-win-light);
}
.mini-opp-signal svg {
width: 16px;
height: 16px;
}
.mini-opp-content {
flex: 1;
min-width: 0;
}
.mini-opp-keyword {
font-size: 0.875rem;
font-weight: 600;
color: var(--dark-text);
margin-bottom: 0.25rem;
}
.mini-opp-meta {
font-size: 0.75rem;
color: var(--dark-text-muted);
}
.mini-opp-value {
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 600;
color: var(--signal-growth-light);
white-space: nowrap;
}
/* Floating annotations */
.hero-annotation {
position: absolute;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.75rem 1rem;
box-shadow: var(--shadow-lg);
font-size: 0.75rem;
opacity: 0;
animation: floatIn 0.8s var(--ease-out) forwards;
}
.hero-annotation-left {
left: -20%;
top: 30%;
animation-delay: 0.8s;
}
.hero-annotation-right {
right: -15%;
bottom: 25%;
animation-delay: 1s;
}
@keyframes floatIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.annotation-label {
font-family: var(--font-mono);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-muted);
margin-bottom: 0.25rem;
}
.annotation-value {
font-weight: 600;
color: var(--ink);
}
.annotation-value.amber {
color: var(--amber);
}
/* =================================================================
CATEGORY SHIFT - The Old Way vs New Way
================================================================= */
.category-shift {
padding: 7rem 2rem;
background: var(--dark-bg);
position: relative;
overflow: hidden;
}
.category-shift::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--dark-border), transparent);
}
.category-shift-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.category-header {
text-align: center;
max-width: 700px;
margin: 0 auto 4rem;
}
.section-eyebrow {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--amber);
margin-bottom: 1.25rem;
}
.category-headline {
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--dark-text);
margin-bottom: 1.25rem;
}
.category-headline em {
font-style: italic;
color: var(--amber);
}
.category-subhead {
font-size: 1.125rem;
color: var(--dark-text-secondary);
line-height: 1.7;
}
/* The Comparison Grid */
.comparison-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 2rem;
align-items: stretch;
}
.comparison-column {
background: var(--dark-surface);
border: 1px solid var(--dark-border);
border-radius: var(--radius-lg);
padding: 2rem;
}
.comparison-column.old {
opacity: 0.7;
}
.comparison-column.new {
border-color: var(--amber);
box-shadow: 0 0 60px rgba(217, 119, 6, 0.15);
position: relative;
}
.comparison-column.new::before {
content: 'The new standard';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
color: white;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.375rem 1rem;
border-radius: 100px;
white-space: nowrap;
}
.comparison-title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--dark-text);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--dark-border);
}
.comparison-column.old .comparison-title {
color: var(--dark-text-secondary);
}
.comparison-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.comparison-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.9375rem;
color: var(--dark-text-secondary);
line-height: 1.5;
}
.comparison-item-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
}
.comparison-column.old .comparison-item-icon {
color: var(--signal-threat);
}
.comparison-column.new .comparison-item-icon {
color: var(--signal-growth-light);
}
.comparison-divider {
display: flex;
align-items: center;
justify-content: center;
}
.comparison-arrow {
width: 48px;
height: 48px;
background: var(--amber);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 0 30px rgba(217, 119, 6, 0.4);
}
.comparison-arrow svg {
width: 24px;
height: 24px;
}
/* =================================================================
DOLLAR VALUES BY SURFACE - The Showpiece
================================================================= */
.dollar-surface {
padding: 7rem 2rem;
background: var(--paper);
position: relative;
}
.dollar-surface-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.dollar-header {
text-align: center;
max-width: 680px;
margin: 0 auto 4rem;
}
.dollar-headline {
font-size: clamp(2rem, 4vw, 2.75rem);
margin-bottom: 1.25rem;
}
.dollar-headline em {
font-style: italic;
color: var(--amber);
}
.dollar-subhead {
font-size: 1.125rem;
color: var(--ink-secondary);
line-height: 1.7;
}
/* The Dollar Visualization */
.dollar-viz {
max-width: 900px;
margin: 0 auto;
}
.dollar-keyword-bar {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
margin-bottom: 1.5rem;
}
.dollar-keyword-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.dollar-keyword-info {
display: flex;
align-items: center;
gap: 1rem;
}
.dollar-keyword-badge {
background: rgba(22, 163, 74, 0.1);
color: var(--signal-growth);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.375rem 0.75rem;
border-radius: 100px;
border: 1px solid rgba(22, 163, 74, 0.2);
}
.dollar-keyword-name {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 500;
}
.dollar-keyword-total {
text-align: right;
}
.dollar-total-label {
font-size: 0.75rem;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.dollar-total-value {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 600;
color: var(--amber);
}
/* Surface breakdown bars */
.surface-bars {
display: flex;
flex-direction: column;
gap: 1rem;
}
.surface-bar {
display: grid;
grid-template-columns: 140px 1fr 100px;
align-items: center;
gap: 1rem;
}
.surface-label {
display: flex;
align-items: center;
gap: 0.625rem;
}
.surface-icon {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: white;
}
.surface-icon.google { background: var(--google); }
.surface-icon.aio { background: var(--aio); }
.surface-icon.chatgpt { background: var(--chatgpt); }
.surface-icon.perplexity { background: var(--perplexity); }
.surface-name {
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-secondary);
}
.surface-bar-track {
height: 32px;
background: var(--paper);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.surface-bar-fill {
height: 100%;
border-radius: 6px;
position: relative;
transition: width 1s var(--ease-out);
}
.surface-bar-fill.google {
background: linear-gradient(90deg, var(--google), #5a9cf5);
width: 53%;
}
.surface-bar-fill.aio {
background: linear-gradient(90deg, var(--aio), #4ade80);
width: 80%;
}
.surface-bar-fill.chatgpt {
background: linear-gradient(90deg, var(--chatgpt), #34d399);
width: 40%;
}
.surface-bar-fill.perplexity {
background: linear-gradient(90deg, var(--perplexity), #60a5fa);
width: 27%;
}
.surface-bar-fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
}
.surface-value {
font-family: var(--font-mono);
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink);
text-align: right;
}
/* Dollar callout */
.dollar-callout {
background: var(--dark-bg);
border-radius: var(--radius-lg);
padding: 2rem 2.5rem;
display: flex;
align-items: center;
gap: 2rem;
margin-top: 2rem;
}
.dollar-callout-icon {
width: 56px;
height: 56px;
background: var(--amber-glow-strong);
border: 1px solid rgba(217, 119, 6, 0.3);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dollar-callout-icon svg {
width: 28px;
height: 28px;
color: var(--amber);
}
.dollar-callout-text {
flex: 1;
}
.dollar-callout-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--dark-text);
margin-bottom: 0.375rem;
}
.dollar-callout-desc {
font-size: 0.9375rem;
color: var(--dark-text-secondary);
line-height: 1.6;
}
/* =================================================================
GAP ANALYSIS - The Aha Moment
================================================================= */
.gap-analysis {
padding: 7rem 2rem;
background: var(--surface);
border-top: 1px solid var(--border-subtle);
}
.gap-analysis-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.gap-header {
text-align: center;
max-width: 680px;
margin: 0 auto 4rem;
}
.gap-headline {
font-size: clamp(2rem, 4vw, 2.75rem);
margin-bottom: 1.25rem;
}
.gap-headline em {
font-style: italic;
color: var(--amber);
}
.gap-subhead {
font-size: 1.125rem;
color: var(--ink-secondary);
line-height: 1.7;
}
/* Side by side comparison */
.gap-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.gap-column {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.gap-column.winners {
border-color: var(--signal-growth);
}
.gap-column.yours {
border-color: var(--signal-threat);
}
.gap-column-header {
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.gap-column.winners .gap-column-header {
background: rgba(22, 163, 74, 0.08);
border-bottom: 1px solid rgba(22, 163, 74, 0.15);
}
.gap-column.yours .gap-column-header {
background: rgba(220, 38, 38, 0.08);
border-bottom: 1px solid rgba(220, 38, 38, 0.15);
}
.gap-column-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.gap-column.winners .gap-column-icon {
background: rgba(22, 163, 74, 0.15);
color: var(--signal-growth);
}
.gap-column.yours .gap-column-icon {
background: rgba(220, 38, 38, 0.15);
color: var(--signal-threat);
}
.gap-column-icon svg {
width: 18px;
height: 18px;
}
.gap-column-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
}
.gap-column.winners .gap-column-title {
color: var(--signal-growth);
}
.gap-column.yours .gap-column-title {
color: var(--signal-threat);
}
.gap-items {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.gap-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1rem;
background: var(--surface);
border-radius: 8px;
}
.gap-item-label {
font-size: 0.875rem;
color: var(--ink-secondary);
}
.gap-item-value {
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 600;
}
.gap-column.winners .gap-item-value {
color: var(--signal-growth);
}
.gap-column.yours .gap-item-value {
color: var(--signal-threat);
}
/* Gap CTA */
.gap-cta {
max-width: 700px;
margin: 3rem auto 0;
text-align: center;
padding: 2rem;
background: var(--prismatic);
border: 1px solid rgba(217, 119, 6, 0.15);
border-radius: var(--radius-lg);
}
.gap-cta-text {
font-size: 1.0625rem;
color: var(--ink-secondary);
margin-bottom: 1.25rem;
line-height: 1.7;
}
.gap-cta-text strong {
color: var(--ink);
}
/* =================================================================
THINKING TRAIL - Intelligence in Action
================================================================= */
.thinking-section {
padding: 7rem 2rem;
background: var(--paper);
position: relative;
overflow: hidden;
}
/* Subtle separator */
.thinking-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
pointer-events: none;
}
.thinking-inner {
max-width: var(--max-width);
margin: 0 auto;
position: relative;
z-index: 1;
}
.thinking-header {
text-align: center;
max-width: 700px;
margin: 0 auto 4rem;
}
.thinking-headline {
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--ink);
margin-bottom: 1.25rem;
}
.thinking-headline em {
font-style: italic;
color: var(--accent);
}
.thinking-subhead {
font-size: 1.125rem;
color: var(--ink-secondary);
line-height: 1.7;
}
/* Thinking Trail Container */
.thinking-container {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 2.5rem;
align-items: start;
}
/* Left: Process Steps */
.thinking-process {
background: var(--dark-surface);
border: 1px solid var(--dark-border);
border-radius: var(--radius-lg);
padding: 1.75rem;
position: relative;
}
/* Amber glow on card */
.thinking-process::before {
content: '';
position: absolute;
top: -1px;
left: 20%;
right: 20%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.process-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--dark-border);
}
.process-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(217, 119, 6, 0.4);
}
.process-icon svg {
width: 20px;
height: 20px;
color: white;
}
.process-info {
flex: 1;
}
.process-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--dark-text);
}
.process-meta {
font-size: 0.75rem;
color: var(--dark-text-muted);
}
.process-status {
display: flex;
align-items: center;
gap: 0.375rem;
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--amber);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.status-dot {
width: 6px;
height: 6px;
background: var(--amber);
border-radius: 50%;
animation: statusPulse 1.5s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Steps */
.thinking-steps {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.thinking-step {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 10px;
transition: all 0.25s var(--ease-out);
}
.thinking-step:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
}
.step-indicator {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.thinking-step.completed .step-indicator {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
}
.thinking-step.active .step-indicator {
background: rgba(217, 119, 6, 0.2);
border: 2px solid var(--amber);
animation: activeRing 1.5s ease-in-out infinite;
}
@keyframes activeRing {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}
.thinking-step.pending .step-indicator {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
}
.step-indicator svg {
width: 12px;
height: 12px;
}
.step-content {
flex: 1;
min-width: 0;
}
.step-text {
font-size: 0.8125rem;
color: rgba(255,255,255,0.9);
margin-bottom: 0.375rem;
line-height: 1.45;
}
.thinking-step.completed .step-text {
color: rgba(255,255,255,0.65);
}
.thinking-step.pending .step-text {
color: rgba(255,255,255,0.35);
}
.step-skill {
display: inline-flex;
font-family: var(--font-mono);
font-size: 0.5625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.step-skill.voice {
background: rgba(168, 85, 247, 0.15);
color: #c4b5fd;
border: 1px solid rgba(168, 85, 247, 0.25);
}
.step-skill.research {
background: rgba(34, 197, 94, 0.15);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.25);
}
.step-skill.seo {
background: rgba(59, 130, 246, 0.15);
color: #93c5fd;
border: 1px solid rgba(59, 130, 246, 0.25);
}
.step-skill.copy {
background: rgba(217, 119, 6, 0.15);
color: #fbbf24;
border: 1px solid rgba(217, 119, 6, 0.25);
}
/* Right: Output Preview */
.thinking-output {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Narrative Brief Card (compact, matching prototype) */
.narrative-brief-card {
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.narrative-brief-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #22c55e, #eab308, #f97316, var(--accent));
opacity: 0.6;
}
.narrative-brief-inner {
padding: 1.25rem 1.5rem;
}
.narrative-brief-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.875rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.narrative-brief-label svg {
width: 0.875rem;
height: 0.875rem;
}
.narrative-brief-body {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink);
}
.narrative-brief-body p {
margin: 0;
}
.narrative-brief-body strong {
font-weight: 600;
}
.highlight-amber {
color: var(--accent);
font-weight: 500;
}
.narrative-brief-secondary {
margin-top: 0.625rem !important;
font-size: 0.8125rem !important;
color: var(--ink-muted) !important;
}
.narrative-brief-expand {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.875rem;
padding: 0;
font-size: 0.8125rem;
font-weight: 500;
color: var(--ink-muted);
background: none;
border: none;
cursor: pointer;
transition: color 0.15s ease;
}
.narrative-brief-expand:hover {
color: var(--ink);
}
.narrative-brief-expand svg {
width: 0.875rem;
height: 0.875rem;
transition: transform 0.15s ease;
}
.output-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.75rem;
position: relative;
}
.output-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 120px;
background: radial-gradient(circle at top right, var(--amber-glow), transparent 70%);
pointer-events: none;
}
.output-header {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 1rem;
}
.output-badge {
font-family: var(--font-mono);
font-size: 0.5625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.3125rem 0.625rem;
border-radius: 4px;
background: rgba(34, 197, 94, 0.1);
color: var(--signal-growth);
border: 1px solid rgba(34, 197, 94, 0.2);
}
.output-meta {
font-size: 0.75rem;
color: var(--ink-muted);
}
.output-title {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 1rem;
color: var(--ink);
}
.output-preview {
background: var(--paper);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 1.25rem;
}
.output-preview p {
font-size: 0.9375rem;
color: var(--ink-secondary);
line-height: 1.75;
margin-bottom: 0.75rem;
}
.output-preview p:last-child {
margin-bottom: 0;
}
.output-highlight {
background: linear-gradient(90deg, var(--amber-light), rgba(254, 243, 199, 0.5));
padding: 0.125rem 0.25rem;
border-radius: 2px;
}
/* Output footer - subtle inline tags */
.output-footer {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.output-footer-tag {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.3125rem 0.625rem;
border-radius: 4px;
background: var(--paper);
color: var(--ink-muted);
border: 1px solid var(--border);
}
/* =================================================================
5 SIGNALS
================================================================= */
.signals {
padding: 6rem 2rem;
background: var(--dark-bg);
position: relative;
}
.signals::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--dark-border), transparent);
}
.signals-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.signals-header {
max-width: 600px;
margin: 0 auto 4rem;
text-align: center;
}
.signals-headline {
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin-bottom: 1rem;
color: var(--dark-text);
}
.signals-subhead {
font-size: 1.0625rem;
color: var(--dark-text-secondary);
}
.signals .section-eyebrow {
color: var(--amber);
}
.signal-cards {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
.signal-card {
background: var(--dark-surface);
border: 1px solid var(--dark-border);
border-radius: var(--radius);
padding: 1.5rem 1.25rem;
text-align: center;
transition: all 0.3s var(--ease-out);
}
.signal-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.15);
}
.signal-card.growth {
background: linear-gradient(180deg, rgba(22, 163, 74, 0.12), var(--dark-surface));
border-color: rgba(22, 163, 74, 0.3);
}
.signal-card.win {
background: linear-gradient(180deg, rgba(2, 132, 199, 0.12), var(--dark-surface));
border-color: rgba(2, 132, 199, 0.3);
}
.signal-card.threat {
background: linear-gradient(180deg, rgba(220, 38, 38, 0.12), var(--dark-surface));
border-color: rgba(220, 38, 38, 0.3);
}
.signal-card.trend {
background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), var(--dark-surface));
border-color: rgba(124, 58, 237, 0.3);
}
.signal-card.drift {
background: linear-gradient(180deg, rgba(217, 119, 6, 0.12), var(--dark-surface));
border-color: rgba(217, 119, 6, 0.3);
}
.signal-icon {
width: 44px;
height: 44px;
margin: 0 auto 0.875rem;
background: rgba(255,255,255,0.05);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
}
.signal-card.growth .signal-icon { color: #4ade80; }
.signal-card.win .signal-icon { color: #38bdf8; }
.signal-card.threat .signal-icon { color: #f87171; }
.signal-card.trend .signal-icon { color: #a78bfa; }
.signal-card.drift .signal-icon { color: var(--amber); }
.signal-icon svg {
width: 20px;
height: 20px;
}
.signal-name {
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.signal-card.growth .signal-name { color: #4ade80; }
.signal-card.win .signal-name { color: #38bdf8; }
.signal-card.threat .signal-name { color: #f87171; }
.signal-card.trend .signal-name { color: #a78bfa; }
.signal-card.drift .signal-name { color: var(--amber); }
.signal-desc {
font-size: 0.8125rem;
color: var(--dark-text-secondary);
line-height: 1.5;
}
/* =================================================================
PRICING
================================================================= */
.pricing {
padding: 6rem 2rem;
background: var(--surface);
border-top: 1px solid var(--border-subtle);
}
.pricing-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.pricing-header {
max-width: 600px;
margin: 0 auto 4rem;
text-align: center;
}
.pricing-headline {
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin-bottom: 0.75rem;
}
.pricing-subhead {
font-size: 1.0625rem;
color: var(--ink-secondary);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
}
.pricing-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
display: flex;
flex-direction: column;
transition: all 0.3s var(--ease-out);
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.pricing-card.featured {
border-color: var(--amber);
box-shadow: 0 0 0 1px var(--amber), var(--shadow-lg);
background: var(--surface);
position: relative;
}
.pricing-card.featured::before {
content: 'Most popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
color: white;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.375rem 0.875rem;
border-radius: 100px;
}
.pricing-tier {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 0.375rem;
}
.pricing-desc {
font-size: 0.875rem;
color: var(--ink-tertiary);
margin-bottom: 1.5rem;
}
.pricing-price {
display: flex;
align-items: baseline;
gap: 0.25rem;
margin-bottom: 1.5rem;
}
.pricing-amount {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 500;
}
.pricing-period {
font-size: 0.875rem;
color: var(--ink-tertiary);
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0 0 2rem;
flex: 1;
}
.pricing-features li {
font-size: 0.9375rem;
color: var(--ink-secondary);
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.pricing-features li::before {
content: '';
position: absolute;
left: 0;
top: 0.8rem;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size: contain;
}
.pricing-cta {
display: block;
text-align: center;
font-size: 0.9375rem;
font-weight: 600;
padding: 0.9375rem 1.5rem;
border-radius: var(--radius);
text-decoration: none;
transition: all 0.25s var(--ease-out);
}
.pricing-card:not(.featured) .pricing-cta {
color: var(--ink);
background: var(--surface);
border: 1px solid var(--border);
}
.pricing-card:not(.featured) .pricing-cta:hover {
border-color: var(--ink);
}
.pricing-card.featured .pricing-cta {
color: white;
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
box-shadow: var(--shadow-amber);
}
.pricing-card.featured .pricing-cta:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-amber-lg);
}
.pricing-guarantee {
max-width: 480px;
margin: 3rem auto 0;
text-align: center;
font-size: 0.9375rem;
color: var(--ink-tertiary);
}
/* =================================================================
FAQ
================================================================= */
.faq {
padding: 6rem 2rem;
background: var(--paper);
border-top: 1px solid var(--border-subtle);
}
.faq-inner {
max-width: 720px;
margin: 0 auto;
}
.faq-header {
text-align: center;
margin-bottom: 3rem;
}
.faq-headline {
font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.2s;
}
.faq-item:hover {
border-color: var(--amber);
}
.faq-question {
width: 100%;
padding: 1.25rem 1.5rem;
background: none;
border: none;
text-align: left;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.faq-question:hover {
background: var(--paper);
}
.faq-icon {
width: 20px;
height: 20px;
color: var(--amber);
flex-shrink: 0;
transition: transform 0.25s var(--ease-out);
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0 1.5rem;
font-size: 0.9375rem;
color: var(--ink-secondary);
line-height: 1.7;
transition: all 0.3s var(--ease-out);
}
.faq-item.open .faq-answer {
max-height: 500px;
opacity: 1;
padding: 0 1.5rem 1.25rem;
}
/* =================================================================
FINAL CTA
================================================================= */
.final-cta {
padding: 7rem 2rem;
background: var(--dark-bg);
position: relative;
overflow: hidden;
}
.final-cta::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1000px;
height: 600px;
background: radial-gradient(ellipse, rgba(217, 119, 6, 0.1), transparent 60%);
pointer-events: none;
}
.final-cta-inner {
max-width: 700px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.final-cta-headline {
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--dark-text);
margin-bottom: 1.25rem;
}
.final-cta-headline em {
font-style: italic;
color: var(--amber);
}
.final-cta-body {
font-size: 1.125rem;
color: var(--dark-text-secondary);
margin-bottom: 2.5rem;
line-height: 1.7;
}
.final-cta-proof {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--dark-text-muted);
}
/* =================================================================
FOOTER
================================================================= */
.footer {
padding: 2.5rem 2rem;
background: var(--dark-surface);
border-top: 1px solid var(--dark-border);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-brand {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-mark {
width: 16px;
height: 16px;
background: var(--amber);
transform: rotate(45deg);
border-radius: 3px;
}
.footer-name {
font-family: var(--font-display);
font-size: 0.9375rem;
color: var(--dark-text);
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-link {
font-size: 0.8125rem;
color: var(--dark-text-muted);
text-decoration: none;
transition: color 0.2s;
}
.footer-link:hover { color: var(--dark-text); }
.footer-copy {
font-size: 0.8125rem;
color: var(--dark-text-muted);
}
/* =================================================================
RESPONSIVE
================================================================= */
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.hero-content {
max-width: 100%;
text-align: center;
}
.hero-ctas {
justify-content: center;
}
.hero-proof {
justify-content: center;
}
.hero-visual {
max-width: 600px;
margin: 0 auto;
}
.hero-annotation {
display: none;
}
.comparison-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.comparison-divider {
padding: 1rem 0;
}
.comparison-arrow {
transform: rotate(90deg);
}
.gap-comparison {
grid-template-columns: 1fr;
}
.thinking-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.signal-cards {
grid-template-columns: repeat(3, 1fr);
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
}
@media (max-width: 768px) {
.nav-links { display: none; }
.hero {
min-height: auto;
padding: 7rem 1.5rem 4rem;
}
.surface-bar {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.surface-label {
justify-content: space-between;
}
.surface-value {
text-align: left;
}
.signal-cards {
grid-template-columns: repeat(2, 1fr);
}
.footer-inner {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
.footer-links {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 480px) {
.hero-ctas {
flex-direction: column;
}
.btn-primary, .btn-secondary {
width: 100%;
justify-content: center;
}
.hero-proof {
flex-direction: column;
gap: 0.5rem;
}
.signal-cards {
grid-template-columns: 1fr;
}
.gap-items {
padding: 1rem;
}
.gap-item {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-inner">
<a href="#" class="nav-logo">
<img src="diamond.png" alt="" class="nav-logo-icon">
<span class="nav-name">Boring Marketing</span>
</a>
<div class="nav-links">
<a href="#how-it-works" class="nav-link">How it works</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#faq" class="nav-link">FAQ</a>
<a href="#" class="nav-cta">Get started free</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-inner">
<div class="hero-grid">
<div class="hero-content">
<div class="hero-eyebrow">
The dashboard era is over
</div>
<h1 class="hero-headline">
<span class="hero-headline-line">Keywords.</span>
<span class="hero-headline-line">AI search.</span>
<span class="hero-headline-line">Competitors.</span>
<span class="hero-headline-line"><em>Monitored overnight.</em></span>
</h1>
<p class="hero-subhead">
No dashboards to dig through. No expertise required. You wake up knowing exactly how to win—<strong>dollar values by surface</strong>, gap analysis vs. top performers, and platform-optimized drafts ready to publish. We don't just tell you what to do—we do it for you.
</p>
<div class="hero-ctas">
<a href="#" class="btn-primary">
Get your first brief free
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
<a href="#how-it-works" class="btn-secondary">See how it works</a>
</div>
<div class="hero-proof">
<div class="hero-proof-item">
<span class="hero-proof-dot"></span>
200+ marketers
</div>
<div class="hero-proof-item">
<span class="hero-proof-dot"></span>
2M+ keywords monitored
</div>
</div>
</div>
<div class="hero-visual">
<div class="hero-preview">
<div class="hero-preview-inner">
<div class="mini-brief">
<div class="mini-brief-header">
<span class="mini-brief-title">Today's Brief</span>
<span class="mini-brief-time">7:00 AM · 12 opportunities</span>
</div>
<div class="mini-opportunity">
<div class="mini-opp-signal growth">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
</svg>
</div>
<div class="mini-opp-content">
<div class="mini-opp-keyword">"fractional cmo services"</div>
<div class="mini-opp-meta">Untapped • AI Overview opportunity • Draft ready</div>
</div>
<div class="mini-opp-value">$14,200/mo</div>
</div>
<div class="mini-opportunity">
<div class="mini-opp-signal win">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</svg>
</div>
<div class="mini-opp-content">
<div class="mini-opp-keyword">"b2b content strategy"</div>
<div class="mini-opp-meta">Competitor gap • You rank #8, they rank #2</div>
</div>
<div class="mini-opp-value">$8,400/mo</div>
</div>
</div>
</div>
</div>
<!-- Floating annotations -->
<div class="hero-annotation hero-annotation-left">
<div class="annotation-label">Total value</div>
<div class="annotation-value amber">$47,800/mo</div>
</div>
<div class="hero-annotation hero-annotation-right">
<div class="annotation-label">Drafts ready</div>
<div class="annotation-value">8 of 12</div>
</div>
</div>
</div>
</div>
</section>
<!-- CATEGORY SHIFT -->
<section class="category-shift">
<div class="category-shift-inner">
<div class="category-header">
<div class="section-eyebrow">The shift</div>
<h2 class="category-headline">Everyone else stops at <em>showing you the problem.</em></h2>
<p class="category-subhead">
Dashboards require expertise. Analysis requires time. And neither shows you what's actually working for your competitors—or helps you win.
</p>
</div>
<div class="comparison-grid">
<div class="comparison-column old">
<div class="comparison-title">The dashboard model</div>
<div class="comparison-list">
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span>Log in, navigate menus, build reports</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span>Arbitrary scores (what's a "difficulty of 67"?)</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span>Data without context or action</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span>You figure out what to do next</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span>Google only—AI search is invisible</span>
</div>
</div>
</div>
<div class="comparison-divider">
<div class="comparison-arrow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</div>
</div>
<div class="comparison-column new">
<div class="comparison-title">Intelligence that acts</div>
<div class="comparison-list">
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span>Brief delivered to your inbox every morning</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span>Dollar values—actual revenue potential</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span>Gap analysis: what winners have, you don't</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span>Ready-to-deploy drafts in your voice</span>
</div>
<div class="comparison-item">
<svg class="comparison-item-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span>All surfaces: Google, AI Overviews, ChatGPT, Perplexity</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- THINKING TRAIL / INTELLIGENCE IN ACTION -->
<section class="thinking-section">
<div class="thinking-inner">
<div class="thinking-header">
<div class="section-eyebrow">How we help you win</div>
<h2 class="thinking-headline">Not just insights. <em>Execution.</em></h2>
<p class="thinking-subhead">
Every draft is created with full context—your brand voice, competitor analysis, citation structure, and platform-specific optimization. Not generic AI. Expert-level execution.
</p>
</div>
<div class="thinking-container">
<!-- Left: Process -->
<div class="thinking-process">
<div class="process-header">
<div class="process-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
</svg>
</div>
<div class="process-info">
<div class="process-title">Generating draft</div>
<div class="process-meta">"fractional cmo services"</div>
</div>
<div class="process-status">
<span class="status-dot"></span>
Processing
</div>
</div>
<div class="thinking-steps">
<div class="thinking-step completed">
<div class="step-indicator">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<div class="step-content">
<div class="step-text">Extracted brand voice from 12 existing pages</div>
<span class="step-skill voice">brand-voice</span>
</div>
</div>
<div class="thinking-step completed">
<div class="step-indicator">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<div class="step-content">
<div class="step-text">Analyzed 8 top-ranking competitor pages</div>
<span class="step-skill research">competitor-intel</span>
</div>
</div>
<div class="thinking-step completed">
<div class="step-indicator">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<div class="step-content">
<div class="step-text">Identified AI Overview citation patterns</div>
<span class="step-skill seo">ai-optimization</span>
</div>
</div>
<div class="thinking-step active">
<div class="step-indicator"></div>
<div class="step-content">
<div class="step-text">Applying direct-response framework</div>
<span class="step-skill copy">direct-response</span>
</div>
</div>
<div class="thinking-step pending">
<div class="step-indicator">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="step-content">
<div class="step-text">Generate FAQ section with schema</div>
<span class="step-skill seo">seo-content</span>
</div>
</div>
</div>
</div>
<!-- Right: Output -->
<div class="thinking-output">
<!-- Narrative Brief Card -->
<div class="narrative-brief-card">
<div class="narrative-brief-inner">
<div class="narrative-brief-label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20V10"></path>
<path d="M18 20V4"></path>
<path d="M6 20v-4"></path>
</svg>
What Changed Overnight
</div>
<div class="narrative-brief-body">
<p>You're <strong>gaining ground in organic</strong> but <span class="highlight-amber">losing AI visibility</span>. Competitor X launched 12 new pages targeting your keywords. Their strategy: quantity. <strong>Your opportunity: quality depth.</strong></p>
<p class="narrative-brief-secondary">AI Overviews now appear on 34% of tracked keywords. You're cited on only 8.</p>
</div>
<button class="narrative-brief-expand">
<span>See full intelligence</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
</div>
</div>
<!-- Content Draft -->
<div class="output-card">
<div class="output-header">
<span class="output-badge">Generated</span>
<span class="output-meta">3,412 words • Ready to deploy</span>
</div>
<h4 class="output-title">"Fractional CMO Services" — Content Draft</h4>
<div class="output-preview">
<p>
<span class="output-highlight">What sets a great fractional CMO apart isn't just strategic thinking</span>—it's the ability to execute without the six-month learning curve. They bring frameworks tested across industries, not theories from business school.
</p>
<p>
The best fractional CMOs don't just advise. They build systems that outlast their engagement: positioning that actually differentiates, messaging that converts, and teams that know how to iterate without hand-holding...
</p>
</div>
</div>
<!-- Inline footer showing what's included -->
<div class="output-footer">
<span class="output-footer-tag">Brand voice</span>
<span class="output-footer-tag">AI optimized</span>
<span class="output-footer-tag">Schema</span>
<span class="output-footer-tag">Ready to publish</span>
</div>
</div>
</div>
</div>
</section>
<!-- DOLLAR VALUES BY SURFACE -->
<section class="dollar-surface" id="how-it-works">
<div class="dollar-surface-inner">
<div class="dollar-header">
<div class="section-eyebrow">Real math, not scores</div>
<h2 class="dollar-headline">Not a score of 67. A <em>price tag</em> by surface.</h2>
<p class="dollar-subhead">
Search volume × CTR × Your conversion × Customer value. Broken down by where the opportunity lives. Because a ChatGPT citation is worth different than a Google ranking.
</p>
</div>
<div class="dollar-viz">
<div class="dollar-keyword-bar">
<div class="dollar-keyword-header">
<div class="dollar-keyword-info">
<span class="dollar-keyword-badge">Growth Signal</span>
<span class="dollar-keyword-name">"fractional cmo services"</span>
</div>
<div class="dollar-keyword-total">
<div class="dollar-total-label">Total opportunity</div>
<div class="dollar-total-value">$30,000/mo</div>
</div>
</div>
<div class="surface-bars">
<div class="surface-bar">
<div class="surface-label">
<div class="surface-icon aio">AIO</div>
<span class="surface-name">AI Overview</span>
</div>
<div class="surface-bar-track">
<div class="surface-bar-fill aio"></div>
</div>
<div class="surface-value">$12,000/mo</div>
</div>
<div class="surface-bar">
<div class="surface-label">
<div class="surface-icon google">G</div>
<span class="surface-name">Google Search</span>
</div>
<div class="surface-bar-track">
<div class="surface-bar-fill google"></div>
</div>
<div class="surface-value">$8,000/mo</div>
</div>
<div class="surface-bar">
<div class="surface-label">
<div class="surface-icon chatgpt">C</div>
<span class="surface-name">ChatGPT</span>
</div>
<div class="surface-bar-track">
<div class="surface-bar-fill chatgpt"></div>
</div>
<div class="surface-value">$6,000/mo</div>
</div>
<div class="surface-bar">
<div class="surface-label">
<div class="surface-icon perplexity">P</div>
<span class="surface-name">Perplexity</span>
</div>
<div class="surface-bar-track">
<div class="surface-bar-fill perplexity"></div>
</div>
<div class="surface-value">$4,000/mo</div>
</div>
</div>
</div>
<div class="dollar-callout">
<div class="dollar-callout-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<div class="dollar-callout-text">
<div class="dollar-callout-title">Other tools show you the problem.</div>
<div class="dollar-callout-desc">
We give you the solution. Not difficulty scores—revenue potential. Broken down by where you can capture it. Different surfaces, different strategies, different drafts ready to publish.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GAP ANALYSIS -->
<section class="gap-analysis">
<div class="gap-analysis-inner">
<div class="gap-header">
<div class="section-eyebrow">The aha moment</div>
<h2 class="gap-headline">See exactly <em>why</em> they're winning.</h2>
<p class="gap-subhead">
For every opportunity, we analyze what top-ranking and AI-cited pages have—and what yours is missing. No guessing. No generic advice. Specific gaps you can close.
</p>
</div>
<div class="gap-comparison">
<div class="gap-column winners">
<div class="gap-column-header">
<div class="gap-column-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="gap-column-title">Pages getting cited</span>
</div>
<div class="gap-items">
<div class="gap-item">
<span class="gap-item-label">Word count</span>
<span class="gap-item-value">3,847 avg</span>
</div>
<div class="gap-item">
<span class="gap-item-label">FAQ section</span>
<span class="gap-item-value">Yes (8+ Q&As)</span>
</div>
<div class="gap-item">
<span class="gap-item-label">Schema markup</span>
<span class="gap-item-value">FAQ + How-to</span>
</div>
<div class="gap-item">
<span class="gap-item-label">Internal links</span>
<span class="gap-item-value">12+ per page</span>
</div>
<div class="gap-item">
<span class="gap-item-label">Content freshness</span>
<span class="gap-item-value">Updated 30 days</span>
</div>
</div>
</div>
<div class="gap-column yours">
<div class="gap-column-header">
<div class="gap-column-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
</div>
<span class="gap-column-title">Your current page</span>
</div>
<div class="gap-items">
<div class="gap-item">
<span class="gap-item-label">Word count</span>
<span class="gap-item-value">1,247 words</span>
</div>
<div class="gap-item">
<span class="gap-item-label">FAQ section</span>
<span class="gap-item-value">Missing</span>
</div>
<div class="gap-item">
<span class="gap-item-label">Schema markup</span>
<span class="gap-item-value">None</span>
</div>
<div class="gap-item">
<span class="gap-item-label">Internal links</span>
<span class="gap-item-value">4 links</span>
</div>
<div class="gap-item">
<span class="gap-item-label">Content freshness</span>
<span class="gap-item-value">8 months ago</span>
</div>
</div>
</div>
</div>
<div class="gap-cta">
<p class="gap-cta-text">
<strong>We don't just show you this gap.</strong> We generate the content to close it—~3,500 words, FAQ section included, schema-ready, in your brand voice. Ready to review and publish.
</p>
<a href="#" class="btn-primary">
See your gaps
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="16" height="16">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
</div>
</section>
<!-- 5 SIGNALS -->
<section class="signals">
<div class="signals-inner">
<div class="signals-header">
<div class="section-eyebrow">Clear priorities</div>
<h2 class="signals-headline">Five signals. No interpretation.</h2>
<p class="signals-subhead">Every opportunity categorized by what it means—with clear guidance on how to win.</p>
</div>
<div class="signal-cards">
<div class="signal-card growth">
<div class="signal-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>
</svg>
</div>
<div class="signal-name">Growth</div>
<p class="signal-desc">Untapped keyword you could capture</p>
</div>
<div class="signal-card win">
<div class="signal-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</svg>
</div>
<div class="signal-name">Win</div>
<p class="signal-desc">Competitor weakness to exploit</p>
</div>
<div class="signal-card threat">
<div class="signal-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</div>
<div class="signal-name">Threat</div>
<p class="signal-desc">Position you're losing</p>
</div>
<div class="signal-card trend">
<div class="signal-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>
</svg>
</div>
<div class="signal-name">Trend</div>
<p class="signal-desc">Demand surging in your space</p>
</div>
<div class="signal-card drift">
<div class="signal-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
</svg>
</div>
<div class="signal-name">Drift</div>
<p class="signal-desc">Competitor gaining ground</p>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="pricing" id="pricing">
<div class="pricing-inner">
<div class="pricing-header">
<div class="section-eyebrow">Simple pricing</div>
<h2 class="pricing-headline">Pick your level. Cancel anytime.</h2>
<p class="pricing-subhead">No dashboards to learn. No expertise required.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-tier">Starter</div>
<p class="pricing-desc">One domain. Full intelligence.</p>
<div class="pricing-price">
<span class="pricing-amount">$99</span>
<span class="pricing-period">/month</span>
</div>
<ul class="pricing-features">
<li>Daily brief with prioritized opportunities</li>
<li>Dollar values by surface</li>
<li>All 5 signal types</li>
<li>AI Overview + LLM tracking</li>
<li>Gap analysis for each opportunity</li>
</ul>
<a href="#" class="pricing-cta">Start free trial</a>
</div>
<div class="pricing-card featured">
<div class="pricing-tier">Professional</div>
<p class="pricing-desc">Everything in Starter, plus:</p>
<div class="pricing-price">
<span class="pricing-amount">$199</span>
<span class="pricing-period">/month</span>
</div>
<ul class="pricing-features">
<li>AI-generated content drafts</li>
<li>Brand voice extraction</li>
<li>Up to 3 competitor deep-dives</li>
<li>Platform-specific optimization</li>
<li>Priority email delivery</li>
</ul>
<a href="#" class="pricing-cta">Start free trial</a>
</div>
<div class="pricing-card">
<div class="pricing-tier">Agency</div>
<p class="pricing-desc">Multiple clients. White-label ready.</p>
<div class="pricing-price">
<span class="pricing-amount">$499</span>
<span class="pricing-period">/month</span>
</div>
<ul class="pricing-features">
<li>Up to 10 domains</li>
<li>White-label briefs</li>
<li>Client-ready exports</li>
<li>Team access</li>
<li>API access</li>
</ul>
<a href="#" class="pricing-cta">Contact us</a>
</div>
</div>
<p class="pricing-guarantee">14-day free trial on all plans. No credit card required.</p>
</div>
</section>
<!-- FAQ -->
<section class="faq" id="faq">
<div class="faq-inner">
<div class="faq-header">
<div class="section-eyebrow">FAQ</div>
<h2 class="faq-headline">Common questions</h2>
</div>
<div class="faq-list">
<div class="faq-item">
<button class="faq-question">
How is this different from SEO tools?
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
<div class="faq-answer">
SEO tools show you the problem. We give you the solution. They're research dashboards—powerful, but they require expertise and time to extract value. We do the analysis for you and deliver actionable opportunities with ready-to-publish content. You don't log in to explore. You wake up knowing how to win.
</div>
</div>
<div class="faq-item">
<button class="faq-question">
What if I already have SEO tools?
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
<div class="faq-answer">
Keep them for deep research when you need it. We work alongside your existing stack—we're not replacing your tools, we're making sure you actually get value from the intelligence buried in them by synthesizing it into priorities and action.
</div>
</div>
<div class="faq-item">
<button class="faq-question">
How do the AI-generated drafts work?
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
<div class="faq-answer">
For each opportunity, we extract your brand voice from existing content, analyze what competitors are doing, identify citation patterns in AI Overviews, and generate ~3,500-word drafts optimized for both humans and AI systems. Complete with FAQ sections and schema markup. Ready to review and publish.
</div>
</div>
<div class="faq-item">
<button class="faq-question">
How do you track AI search visibility?
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
<div class="faq-answer">
We monitor whether AI Overviews appear for your tracked keywords and whether you're cited. We track mentions in ChatGPT and Perplexity. When these AI surfaces change—new citations, lost visibility, competitor gains—you'll know in your next brief.
</div>
</div>
<div class="faq-item">
<button class="faq-question">
What happens after my trial?
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
<div class="faq-answer">
14 days of full access. If you don't find value, cancel—no questions, no card charged. Most marketers see actionable opportunities within the first week.
</div>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="final-cta">
<div class="final-cta-inner">
<h2 class="final-cta-headline">Stop analyzing. <em>Start winning.</em></h2>
<p class="final-cta-body">
Enter your domain. Tomorrow morning, you'll know exactly which opportunities matter, what competitors are doing, and have content ready to deploy. Intelligence that doesn't just inform—it acts.
</p>
<a href="#" class="btn-primary">
Get your first brief free
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
<p class="final-cta-proof">Join 200+ marketers who wake up knowing how to win</p>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<div class="footer-mark"></div>
<span class="footer-name">Boring Marketing</span>
</div>
<div class="footer-links">
<a href="#" class="footer-link">Privacy</a>
<a href="#" class="footer-link">Terms</a>
<a href="#" class="footer-link">Contact</a>
</div>
<span class="footer-copy">© 2025 Boring Marketing</span>
</div>
</footer>
<script>
// FAQ Toggle
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
const item = button.closest('.faq-item');
const isOpen = item.classList.contains('open');
// Close all
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
// Open clicked if it was closed
if (!isOpen) {
item.classList.add('open');
}
});
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const href = this.getAttribute('href');
if (href !== '#') {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
});
});
// Animate surface bars on scroll
const observerOptions = {
threshold: 0.3,
rootMargin: '0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe elements for animation
document.querySelectorAll('.surface-bar-fill').forEach(el => {
el.style.width = '0';
observer.observe(el.closest('.dollar-keyword-bar'));
});
// Trigger bar animation when visible
const dollarSection = document.querySelector('.dollar-keyword-bar');
if (dollarSection) {
const barObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setTimeout(() => {
document.querySelector('.surface-bar-fill.aio').style.width = '80%';
document.querySelector('.surface-bar-fill.google').style.width = '53%';
document.querySelector('.surface-bar-fill.chatgpt').style.width = '40%';
document.querySelector('.surface-bar-fill.perplexity').style.width = '27%';
}, 200);
barObserver.disconnect();
}
});
}, { threshold: 0.5 });
barObserver.observe(dollarSection);
}
</script>
</body>
</html>
Raw
boring-marketing-prototype.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boring Marketing - Intelligence Prototype</title>
<!-- Fonts - Matching V11 Landing Page -->
<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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* =================================================================
PRISMATIC VIBE DESIGN SYSTEM - Boring Marketing Prototype
Matching V11 Landing Page aesthetic
================================================================= */
:root {
/* Typography - Matching V11 */
--font-display: "Fraunces", Georgia, serif;
--font-body: "Plus Jakarta Sans", -apple-system, sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* Core Colors - V11 Palette */
--paper: #f8f7f4;
--paper-warm: #f5f4f0;
--paper-alt: #efeeea;
--ink: #0f0f0f;
--ink-secondary: #3d3d3d;
--ink-tertiary: #666666;
--ink-muted: #999999;
/* Legacy aliases */
--background: var(--paper);
--foreground: var(--ink);
--card: #ffffff;
--card-foreground: var(--ink);
--surface: #ffffff;
--border: #e2e2e0;
--border-subtle: #eeeeec;
--muted: var(--paper-alt);
--muted-foreground: var(--ink-tertiary);
/* Brand Accent (Amber) */
--amber: #d97706;
--amber-dark: #b45309;
--amber-light: #fef3c7;
--amber-glow: rgba(217, 119, 6, 0.15);
--accent-brand: var(--amber);
--accent-brand-light: var(--amber-light);
--accent-brand-dark: var(--amber-dark);
/* Prismatic Gradient - V11 Multi-color vibe */
--prismatic: linear-gradient(135deg,
rgba(251, 191, 36, 0.15),
rgba(244, 114, 182, 0.15),
rgba(168, 85, 247, 0.15),
rgba(59, 130, 246, 0.15),
rgba(34, 197, 94, 0.15));
/* Signal Colors with Gradient Backgrounds */
--signal-growth: #15803D;
--growth-bg: linear-gradient(135deg, rgba(21, 128, 61, 0.12), rgba(34, 197, 94, 0.08));
--growth-border: rgba(21, 128, 61, 0.2);
--signal-win: #0369A1;
--win-bg: linear-gradient(135deg, rgba(3, 105, 161, 0.12), rgba(56, 189, 248, 0.08));
--win-border: rgba(3, 105, 161, 0.2);
--signal-threat: #B91C1C;
--threat-bg: linear-gradient(135deg, rgba(185, 28, 28, 0.12), rgba(248, 113, 113, 0.08));
--threat-border: rgba(185, 28, 28, 0.2);
--signal-trend: #7C3AED;
--trend-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.08));
--trend-border: rgba(124, 58, 237, 0.2);
--signal-drift: #B45309;
--drift-bg: linear-gradient(135deg, rgba(180, 83, 9, 0.12), rgba(251, 191, 36, 0.08));
--drift-border: rgba(180, 83, 9, 0.2);
/* Legacy semantic colors */
--color-success: var(--signal-growth);
--color-success-light: #DCFCE7;
--color-info: var(--signal-win);
--color-danger: var(--signal-threat);
--color-warning: var(--signal-drift);
--color-highlight: var(--signal-trend);
/* V11 Depth System */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
--shadow-sm: 0 2px 4px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.02);
--shadow-md: 0 4px 16px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03);
--shadow-xl: 0 24px 60px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);
--shadow-prismatic: 0 0 80px rgba(168, 85, 247, 0.1), 0 0 40px rgba(251, 191, 36, 0.1);
--shadow-card: var(--shadow-md);
--shadow-elevated: var(--shadow-lg);
--shadow-drawer: -4px 0 24px rgba(0,0,0,0.12), -1px 0 0 rgba(0,0,0,0.05);
/* Spacing */
--radius: 12px;
--radius-lg: 20px;
--radius-xl: 1rem;
/* Animation - V11 easing */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.33, 1, 0.68, 1);
/* Drawer */
--drawer-width: 540px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Subtle grain texture - V11 style */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.02;
pointer-events: none;
z-index: 9999;
}
/* =================================================================
LAYOUT
================================================================= */
.app-container {
min-height: 100vh;
display: flex;
flex-direction: column;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-container.drawer-open {
transform: translateX(calc(-1 * var(--drawer-width) / 2));
}
.top-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
padding: 0.875rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--ink);
display: flex;
align-items: center;
gap: 0.625rem;
letter-spacing: -0.01em;
}
.nav-logo-icon {
width: 1.625rem;
height: 1.625rem;
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
border-radius: 0.5rem;
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.nav-channel-selector {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
}
.main-content {
flex: 1;
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.5rem;
width: 100%;
}
/* =================================================================
RIGHT SIDE DRAWER
================================================================= */
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 100;
}
.drawer-overlay.open {
opacity: 1;
visibility: visible;
}
.drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: var(--drawer-width);
max-width: 100vw;
height: 100vh;
background: var(--card);
box-shadow: var(--shadow-drawer);
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 101;
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer.open {
transform: translateX(0);
}
#drawer-content,
.draft-preview-state {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0; /* CRITICAL: allows nested flex containers to shrink */
height: 100%;
overflow: hidden;
}
.drawer-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-subtle);
background: var(--card);
flex-shrink: 0;
}
.drawer-close {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--muted);
border: none;
border-radius: var(--radius);
cursor: pointer;
color: var(--muted-foreground);
transition: all 0.15s ease;
}
.drawer-close:hover {
background: var(--border);
color: var(--foreground);
}
.drawer-title-section {
flex: 1;
}
.drawer-signal {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
border-radius: 0.375rem;
margin-bottom: 0.5rem;
}
.drawer-keyword {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 500;
color: var(--ink);
margin-bottom: 0.25rem;
letter-spacing: -0.01em;
}
.drawer-value {
font-family: var(--font-display);
font-size: 1.625rem;
font-weight: 600;
color: var(--signal-growth);
letter-spacing: -0.02em;
}
.drawer-body {
flex: 1;
min-height: 0; /* CRITICAL: allows flex item to shrink below content height */
overflow-y: auto;
overflow-x: hidden;
padding: 1.5rem;
padding-bottom: 350px; /* Space for fixed footer - must be footer height + last section height */
-webkit-overflow-scrolling: touch;
}
.draft-preview-body {
flex: 1;
min-height: 0; /* CRITICAL: allows flex item to shrink below content height */
overflow-y: auto;
overflow-x: hidden;
padding: 1.5rem;
padding-bottom: 350px; /* Space for fixed footer - must be footer height + last section height */
-webkit-overflow-scrolling: touch;
}
.drawer-section {
margin-bottom: 1.5rem;
}
.drawer-section:last-child {
margin-bottom: 0;
}
.drawer-section-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted-foreground);
}
.drawer-section-header svg {
width: 0.875rem;
height: 0.875rem;
}
.drawer-text {
font-size: 0.875rem;
line-height: 1.6;
color: var(--foreground);
}
.drawer-text p {
margin-bottom: 0.75rem;
}
.drawer-text p:last-child {
margin-bottom: 0;
}
.drawer-text strong {
font-weight: 600;
}
/* Surface Breakdown in Drawer */
.surface-breakdown-mini {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.surface-row-mini {
display: flex;
align-items: center;
padding: 0.75rem;
background: var(--muted);
border-radius: var(--radius);
gap: 0.75rem;
transition: all 0.15s ease;
cursor: pointer;
}
.surface-row-mini:hover {
background: var(--border-subtle);
}
.surface-row-mini.recommended {
background: var(--accent-brand-light);
border: 1px solid rgba(217, 119, 6, 0.3);
}
.surface-row-mini .surface-icon {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--card);
border-radius: var(--radius);
font-size: 0.875rem;
}
.surface-row-mini .surface-info {
flex: 1;
}
.surface-row-mini .surface-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--foreground);
display: flex;
align-items: center;
gap: 0.5rem;
}
.surface-row-mini .surface-name .best-tag {
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent-brand);
background: white;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
}
.surface-row-mini .surface-position {
font-size: 0.75rem;
color: var(--muted-foreground);
}
.surface-row-mini .surface-impact {
text-align: right;
}
.surface-row-mini .impact-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-success);
}
.surface-row-mini .impact-effort {
font-size: 0.6875rem;
color: var(--muted-foreground);
}
/* Gap List */
.gap-list-mini {
list-style: none;
}
.gap-list-mini li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem 0;
font-size: 0.8125rem;
border-bottom: 1px solid var(--border-subtle);
}
.gap-list-mini li:last-child {
border-bottom: none;
}
.gap-list-mini li::before {
content: "";
width: 0.375rem;
height: 0.375rem;
margin-top: 0.4rem;
background: var(--accent-brand);
border-radius: 50%;
flex-shrink: 0;
}
/* Competitor Insight */
.competitor-insight {
background: var(--muted);
border-radius: var(--radius);
padding: 0.75rem;
font-size: 0.8125rem;
}
.competitor-insight-header {
font-weight: 600;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.competitor-insight ul {
list-style: none;
color: var(--muted-foreground);
}
.competitor-insight ul li {
padding: 0.125rem 0;
}
.competitor-insight .your-gap {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border);
color: var(--color-danger);
font-weight: 500;
}
/* Drawer Footer - Fixed at bottom */
.drawer-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--border);
background: var(--card);
z-index: 10;
}
.drawer-cta-primary {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9375rem 1.5rem;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
border: none;
border-radius: var(--radius-lg);
color: white;
cursor: pointer;
transition: all 0.25s var(--ease-out);
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
}
.drawer-cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
}
.drawer-cta-primary svg {
width: 1.125rem;
height: 1.125rem;
}
.drawer-cta-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 0.75rem;
font-size: 0.75rem;
color: var(--muted-foreground);
}
.kbd-hint {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.125rem 0.375rem;
margin-left: 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
font-family: var(--font-mono);
background: rgba(255,255,255,0.2);
border-radius: 4px;
text-transform: uppercase;
}
.btn .kbd-hint {
background: rgba(0,0,0,0.1);
}
.drawer-cta-meta span {
display: flex;
align-items: center;
gap: 0.25rem;
}
.drawer-secondary-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
.drawer-cta-secondary {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.625rem;
font-size: 0.8125rem;
font-weight: 500;
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--foreground);
cursor: pointer;
transition: all 0.15s ease;
}
.drawer-cta-secondary:hover {
border-color: var(--foreground);
}
/* =================================================================
INTELLIGENCE HOME
================================================================= */
.greeting {
margin-bottom: 2rem;
}
.greeting-text {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.02em;
}
.greeting-subtext {
font-size: 0.9375rem;
color: var(--ink-tertiary);
margin-top: 0.375rem;
line-height: 1.5;
}
/* =================================================================
NARRATIVE CARD
================================================================= */
.narrative-card {
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 1.75rem;
margin-bottom: 2rem;
border: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
}
/* Subtle prismatic accent on card */
.narrative-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--signal-growth), var(--signal-win), var(--signal-trend), var(--amber));
opacity: 0.6;
}
.narrative-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-subtle);
}
.narrative-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--amber);
}
.narrative-label-icon {
width: 1rem;
height: 1rem;
}
.bmi-badge {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
background: var(--prismatic);
border: 1px solid rgba(168, 85, 247, 0.15);
border-radius: 2rem;
box-shadow: var(--shadow-prismatic);
}
.bmi-score {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
.bmi-change {
font-size: 0.8125rem;
font-weight: 600;
color: var(--signal-growth);
display: flex;
align-items: center;
gap: 0.25rem;
}
.narrative-body {
font-size: 1rem;
line-height: 1.6;
color: var(--foreground);
}
.narrative-body strong {
font-weight: 600;
}
.narrative-body .highlight {
color: var(--accent-brand);
font-weight: 500;
}
.narrative-cta {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 1rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--muted-foreground);
text-decoration: none;
transition: color 0.15s ease;
}
.narrative-cta:hover {
color: var(--foreground);
}
.narrative-cta svg {
width: 1rem;
height: 1rem;
transition: transform 0.15s ease;
}
.narrative-cta:hover svg {
transform: translateX(4px);
}
.narrative-expand-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 1rem;
padding: 0;
font-size: 0.8125rem;
font-weight: 500;
color: var(--muted-foreground);
background: none;
border: none;
cursor: pointer;
transition: color 0.15s ease;
}
.narrative-expand-btn:hover {
color: var(--foreground);
}
.narrative-expand-btn svg {
width: 1rem;
height: 1rem;
transition: transform 0.15s ease;
}
.narrative-expand-btn.expanded svg {
transform: rotate(180deg);
}
/* BMI Hero */
.bmi-hero {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, oklch(0.18 0.02 250), oklch(0.15 0.015 250));
border: 1px solid oklch(0.25 0.02 250);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.25rem;
}
.bmi-hero-main {
display: flex;
flex-direction: column;
}
.bmi-hero-score {
font-size: 3rem;
font-weight: 700;
line-height: 1;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.bmi-hero-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.25rem;
}
.bmi-hero-change {
font-size: 0.8125rem;
font-weight: 500;
margin-top: 0.5rem;
}
.bmi-hero-change.positive {
color: #4ade80;
}
.bmi-hero-change.negative {
color: #f87171;
}
.bmi-hero-chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 50px;
}
.mini-trend-bar {
width: 8px;
background: var(--accent-brand);
border-radius: 2px;
opacity: 0.7;
transition: opacity 0.15s ease;
}
.mini-trend-bar:last-child {
opacity: 1;
}
.bmi-hero-chart:hover .mini-trend-bar {
opacity: 1;
}
/* Expanded Brief */
.expanded-brief {
margin-top: 1.25rem;
margin-bottom: 1.5rem;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* =================================================================
ACTION FEED
================================================================= */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.section-title {
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-title h2 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -0.01em;
}
.section-meta {
font-size: 0.75rem;
color: var(--muted-foreground);
padding: 0.25rem 0.5rem;
background: var(--muted);
border-radius: var(--radius);
}
.filter-row {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.filter-btn {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s ease;
}
.filter-btn:hover {
border-color: var(--foreground);
}
.filter-btn.active {
background: var(--foreground);
color: white;
border-color: var(--foreground);
}
/* =================================================================
OPPORTUNITY CARDS
================================================================= */
.opportunity-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.opportunity-card {
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-subtle);
padding: 1.25rem;
transition: all 0.25s var(--ease-out);
cursor: pointer;
}
.opportunity-card:hover {
box-shadow: var(--shadow-lg);
border-color: var(--border);
transform: translateY(-2px);
}
.opportunity-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.opportunity-signal {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
border-radius: 0.375rem;
}
.signal-growth {
background: var(--growth-bg);
color: var(--signal-growth);
border: 1px solid var(--growth-border);
}
.signal-win {
background: var(--win-bg);
color: var(--signal-win);
border: 1px solid var(--win-border);
}
.signal-threat {
background: var(--threat-bg);
color: var(--signal-threat);
border: 1px solid var(--threat-border);
}
.signal-trend {
background: var(--trend-bg);
color: var(--signal-trend);
border: 1px solid var(--trend-border);
}
.signal-drift {
background: var(--drift-bg);
color: var(--signal-drift);
border: 1px solid var(--drift-border);
}
.opportunity-value {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
color: var(--signal-growth);
letter-spacing: -0.01em;
}
.opportunity-keyword {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--ink);
margin-bottom: 0.375rem;
letter-spacing: -0.01em;
}
.opportunity-context {
font-size: 0.875rem;
color: var(--muted-foreground);
margin-bottom: 0.75rem;
}
/* Surface Pills Row */
.surface-pills {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 0.75rem;
}
.surface-pill {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
font-size: 0.6875rem;
font-weight: 500;
background: var(--muted);
border-radius: 1rem;
}
.surface-pill .surface-name {
color: var(--muted-foreground);
}
.surface-pill .surface-status {
font-weight: 600;
color: var(--foreground);
}
.surface-pill.best {
background: var(--accent-brand-light);
}
.surface-pill.best .surface-status {
color: var(--accent-brand);
}
.surface-pill .best-tag {
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--accent-brand);
}
.opportunity-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.75rem;
border-top: 1px solid var(--border-subtle);
}
.opportunity-action-hint {
font-size: 0.75rem;
color: var(--muted-foreground);
display: flex;
align-items: center;
gap: 0.25rem;
}
.opportunity-time {
font-size: 0.6875rem;
color: var(--muted-foreground);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
font-size: 0.8125rem;
font-weight: 500;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
border: none;
}
.btn-secondary {
background: var(--card);
border: 1px solid var(--border);
color: var(--foreground);
}
.btn-secondary:hover {
border-color: var(--foreground);
}
.btn-primary {
background: var(--foreground);
color: white;
}
.btn-primary:hover {
background: #0f172a;
}
.btn-brand {
background: linear-gradient(135deg, var(--amber), var(--amber-dark));
color: white;
box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}
.btn-brand:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.3);
}
/* =================================================================
DRAFTS SECTION
================================================================= */
.drafts-section {
margin-top: 2rem;
}
.draft-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.draft-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s ease;
}
.draft-item:hover {
border-color: var(--border);
box-shadow: var(--shadow-card);
}
.draft-icon {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--muted);
border-radius: var(--radius);
color: var(--muted-foreground);
}
.draft-info {
flex: 1;
}
.draft-title {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
}
.draft-meta {
font-size: 0.75rem;
color: var(--muted-foreground);
}
.draft-status {
font-size: 0.6875rem;
font-weight: 500;
padding: 0.25rem 0.5rem;
border-radius: var(--radius);
}
.status-draft {
background: rgba(124, 58, 237, 0.1);
color: var(--color-highlight);
}
.status-refined {
background: rgba(3, 105, 161, 0.1);
color: var(--color-info);
}
.status-exported {
background: rgba(21, 128, 61, 0.1);
color: var(--color-success);
}
/* =================================================================
VIEW NAVIGATION
================================================================= */
.view-nav {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}
.view-nav-item {
padding: 0.5rem 0;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted-foreground);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -0.5rem;
transition: all 0.15s ease;
cursor: pointer;
}
.view-nav-item:hover {
color: var(--foreground);
}
.view-nav-item.active {
color: var(--foreground);
border-bottom-color: var(--accent-brand);
}
/* =================================================================
FULL NARRATIVE VIEW
================================================================= */
.narrative-section {
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid var(--border-subtle);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.narrative-section-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted-foreground);
}
.narrative-section-header svg {
width: 1rem;
height: 1rem;
}
.trend-chart {
display: flex;
align-items: flex-end;
gap: 0.25rem;
height: 4rem;
margin-bottom: 1rem;
}
.trend-bar {
flex: 1;
background: linear-gradient(to top, var(--accent-brand), rgba(217, 119, 6, 0.3));
border-radius: 0.25rem 0.25rem 0 0;
min-width: 0.5rem;
}
.trend-summary {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
}
.trend-metric {
display: flex;
flex-direction: column;
}
.trend-metric-label {
font-size: 0.6875rem;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.trend-metric-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--foreground);
}
.trend-metric-change {
font-size: 0.75rem;
font-weight: 600;
}
.trend-metric-change.positive {
color: var(--color-success);
}
.trend-metric-change.negative {
color: var(--color-danger);
}
.narrative-text {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--foreground);
}
.narrative-text p {
margin-bottom: 1rem;
}
.narrative-text p:last-child {
margin-bottom: 0;
}
/* Competitor Table */
.competitor-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
}
.competitor-table th {
text-align: left;
padding: 0.75rem 0.5rem;
border-bottom: 1px solid var(--border);
font-weight: 600;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted-foreground);
}
.competitor-table td {
padding: 0.75rem 0.5rem;
border-bottom: 1px solid var(--border-subtle);
}
.competitor-name {
font-weight: 500;
}
.competitor-trend {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.competitor-trend.up {
color: var(--color-danger);
}
.competitor-trend.down {
color: var(--color-success);
}
.competitor-trend.stable {
color: var(--muted-foreground);
}
.threat-level {
font-size: 0.6875rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: var(--radius);
}
.threat-high {
background: rgba(185, 28, 28, 0.1);
color: var(--color-danger);
}
.threat-medium {
background: rgba(180, 83, 9, 0.1);
color: var(--color-warning);
}
.threat-low {
background: rgba(100, 116, 139, 0.1);
color: var(--muted-foreground);
}
/* Surface Coverage */
.surface-coverage {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.surface-row {
display: flex;
align-items: center;
gap: 1rem;
}
.surface-label {
width: 8rem;
font-size: 0.8125rem;
font-weight: 500;
}
.surface-bar-container {
flex: 1;
height: 0.5rem;
background: var(--muted);
border-radius: 0.25rem;
overflow: hidden;
}
.surface-bar {
height: 100%;
border-radius: 0.25rem;
transition: width 0.5s ease;
}
.surface-bar.google {
background: linear-gradient(90deg, var(--color-success), #22c55e);
}
.surface-bar.aio {
background: linear-gradient(90deg, var(--color-danger), #f87171);
}
.surface-bar.chatgpt {
background: linear-gradient(90deg, var(--color-info), #38bdf8);
}
.surface-bar.perplexity {
background: linear-gradient(90deg, var(--color-highlight), #a78bfa);
}
.surface-value {
width: 4rem;
font-size: 0.8125rem;
font-weight: 500;
text-align: right;
}
.surface-trend {
font-size: 0.6875rem;
color: var(--muted-foreground);
}
.surface-trend.declining {
color: var(--color-danger);
}
/* Emerging Signals */
.emerging-signals {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.emerging-signal {
display: flex;
gap: 0.75rem;
padding: 0.75rem;
background: var(--muted);
border-radius: var(--radius);
}
.emerging-signal-icon {
font-size: 1.25rem;
}
.emerging-signal-content h4 {
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.emerging-signal-content p {
font-size: 0.8125rem;
color: var(--muted-foreground);
}
/* =================================================================
VIEW SWITCHING
================================================================= */
.view {
display: none;
}
.view.active {
display: block;
}
/* =================================================================
DRAFT GENERATION STATE
================================================================= */
.generating-state {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
text-align: center;
}
.generating-state.active {
display: flex;
}
.generating-spinner {
width: 3rem;
height: 3rem;
border: 3px solid var(--border);
border-top-color: var(--accent-brand);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.generating-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.generating-subtitle {
font-size: 0.875rem;
color: var(--muted-foreground);
margin-bottom: 1.5rem;
}
.generating-progress {
width: 100%;
max-width: 300px;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
font-size: 0.8125rem;
color: var(--muted-foreground);
}
.progress-item.complete {
color: var(--color-success);
}
.progress-item.active {
color: var(--foreground);
font-weight: 500;
}
.progress-item svg {
width: 1rem;
height: 1rem;
}
/* =================================================================
DRAFT PREVIEW STATE (after generation)
================================================================= */
.draft-preview-state {
display: none;
flex-direction: column;
height: 100%;
}
.draft-preview-state.active {
display: flex;
}
.draft-preview-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-subtle);
background: var(--color-success-light);
}
.draft-preview-success {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-success);
margin-bottom: 0.5rem;
}
.draft-preview-success svg {
width: 1.125rem;
height: 1.125rem;
}
.draft-preview-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--foreground);
}
.draft-preview-meta {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--muted-foreground);
}
.draft-preview-body {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
}
.draft-preview-content {
font-family: var(--font-sans);
font-size: 0.875rem;
line-height: 1.7;
color: var(--foreground);
}
.draft-preview-content h1 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--foreground);
}
.draft-preview-content h2 {
font-size: 1.125rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
color: var(--foreground);
}
.draft-preview-content p {
margin-bottom: 1rem;
}
.draft-preview-content .faq-section {
background: var(--accent-brand-light);
border-radius: var(--radius);
padding: 1rem;
margin: 1rem 0;
}
.draft-preview-content .faq-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent-brand);
margin-bottom: 0.5rem;
}
.draft-preview-content .faq-question {
font-weight: 600;
margin-bottom: 0.25rem;
}
.draft-preview-content .faq-answer {
color: var(--muted-foreground);
}
.draft-preview-footer {
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--border);
background: var(--card);
}
.draft-preview-actions {
display: flex;
gap: 0.75rem;
}
.draft-preview-actions .btn {
flex: 1;
}
/* =================================================================
QUICK ACTION ON CARDS
================================================================= */
.opportunity-quick-action {
display: none;
position: absolute;
right: 1rem;
bottom: 1rem;
padding: 0.5rem 0.875rem;
font-size: 0.75rem;
font-weight: 600;
background: var(--accent-brand);
color: white;
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s ease;
z-index: 2;
}
.opportunity-card {
position: relative;
}
.opportunity-card:hover .opportunity-quick-action {
display: flex;
align-items: center;
gap: 0.375rem;
}
.opportunity-quick-action:hover {
background: var(--accent-brand-dark);
transform: translateY(-1px);
}
.opportunity-quick-action svg {
width: 0.875rem;
height: 0.875rem;
}
.opportunity-quick-action.loading {
pointer-events: none;
opacity: 0.8;
}
.opportunity-quick-action.loading svg {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* =================================================================
SURFACE SELECTOR DROPDOWN
================================================================= */
.surface-selector {
position: relative;
}
.surface-selector-menu {
display: none;
position: absolute;
bottom: calc(100% + 0.5rem);
left: 0;
right: 0;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-elevated);
overflow: hidden;
z-index: 10;
}
.surface-selector-menu.open {
display: block;
}
.surface-selector-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background 0.15s ease;
}
.surface-selector-item:hover {
background: var(--muted);
}
.surface-selector-item.recommended {
background: var(--accent-brand-light);
}
.surface-selector-item.recommended:hover {
background: rgba(217, 119, 6, 0.15);
}
.surface-selector-left {
display: flex;
align-items: center;
gap: 0.5rem;
}
.surface-selector-icon {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
.surface-selector-name {
font-size: 0.8125rem;
font-weight: 500;
}
.surface-selector-tag {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 0.125rem 0.375rem;
background: white;
color: var(--accent-brand);
border-radius: 0.25rem;
margin-left: 0.375rem;
}
.surface-selector-right {
text-align: right;
}
.surface-selector-value {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-success);
}
.surface-selector-effort {
font-size: 0.6875rem;
color: var(--muted-foreground);
}
/* Toast notification */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--foreground);
color: white;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 500;
box-shadow: var(--shadow-elevated);
opacity: 0;
transition: all 0.3s ease;
z-index: 200;
}
.toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
/* =================================================================
ACTIONS LIST VIEW
================================================================= */
.actions-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.actions-sort-select {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
}
.actions-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.action-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.15s ease;
}
.action-row:hover {
border-color: var(--border);
box-shadow: var(--shadow-card);
}
.action-signal-col {
flex-shrink: 0;
width: 70px;
}
.action-main {
flex: 1;
min-width: 0;
}
.action-keyword {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--ink);
margin-bottom: 0.25rem;
letter-spacing: -0.01em;
}
.action-context {
font-size: 0.8125rem;
color: var(--muted-foreground);
line-height: 1.4;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.action-surfaces {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.mini-surface {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1875rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
border-radius: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.mini-surface.google {
background: oklch(0.95 0.02 250);
color: oklch(0.35 0.08 250);
}
.mini-surface.aio {
background: oklch(0.95 0.04 300);
color: oklch(0.40 0.15 300);
}
.mini-surface.chatgpt {
background: oklch(0.95 0.03 160);
color: oklch(0.35 0.12 160);
}
.mini-surface.perplexity {
background: oklch(0.95 0.02 200);
color: oklch(0.35 0.08 200);
}
.mini-surface.declining {
background: oklch(0.95 0.04 25);
color: var(--color-danger);
}
.action-value {
flex-shrink: 0;
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-success);
text-align: right;
min-width: 80px;
}
.actions-load-more {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.load-more-btn {
padding: 0.75rem 1.5rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--muted-foreground);
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s ease;
}
.load-more-btn:hover {
background: var(--card);
border-color: var(--foreground);
color: var(--foreground);
}
/* =================================================================
DRAFTS LIST VIEW
================================================================= */
.drafts-header {
margin-bottom: 1.25rem;
}
.drafts-filter-row {
display: flex;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.drafts-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.draft-card {
background: var(--card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
transition: all 0.15s ease;
}
.draft-card:hover {
border-color: var(--border);
box-shadow: var(--shadow-card);
}
.draft-card.in-progress {
opacity: 0.8;
}
.draft-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.draft-status-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.draft-status-badge.status-ready {
background: var(--color-success-light);
color: var(--color-success);
}
.draft-status-badge.status-in-progress {
background: var(--accent-brand-light);
color: var(--accent-brand);
}
.draft-status-badge.status-exported {
background: oklch(0.95 0.02 250);
color: oklch(0.35 0.08 250);
}
.draft-date {
font-size: 0.75rem;
color: var(--muted-foreground);
}
.draft-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.draft-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--muted-foreground);
margin-bottom: 0.75rem;
}
.draft-keyword {
font-family: var(--font-mono);
font-size: 0.75rem;
background: var(--muted);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
}
.draft-separator {
color: var(--border);
}
.draft-value {
font-weight: 600;
color: var(--color-success);
}
.draft-card-preview {
font-size: 0.875rem;
line-height: 1.6;
color: var(--muted-foreground);
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.draft-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.draft-action-btn {
padding: 0.5rem 0.875rem;
font-size: 0.75rem;
font-weight: 500;
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s ease;
}
.draft-action-btn:hover {
background: var(--card);
border-color: var(--foreground);
}
.draft-action-btn.primary {
background: var(--accent-brand);
color: white;
border-color: var(--accent-brand);
}
.draft-action-btn.primary:hover {
background: var(--accent-brand-dark);
border-color: var(--accent-brand-dark);
}
.draft-progress-bar {
height: 4px;
background: var(--border);
border-radius: 2px;
margin-bottom: 0.75rem;
overflow: hidden;
}
.draft-progress-fill {
height: 100%;
background: var(--accent-brand);
border-radius: 2px;
transition: width 0.3s ease;
}
.draft-progress-text {
font-size: 0.8125rem;
color: var(--muted-foreground);
font-style: italic;
}
/* Draft Reasoning Steps */
.draft-reasoning {
margin-top: 0.75rem;
padding: 0.875rem;
background: oklch(0.985 0.005 250);
border: 1px solid oklch(0.92 0.02 250);
border-radius: var(--radius);
}
.draft-reasoning-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.75rem;
}
.draft-reasoning-header svg {
width: 14px;
height: 14px;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.reasoning-steps {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.reasoning-step {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--muted-foreground);
}
.reasoning-step.completed {
color: var(--color-success);
}
.reasoning-step.active {
color: var(--foreground);
font-weight: 500;
}
.reasoning-step.pending {
color: var(--muted-foreground);
opacity: 0.5;
}
.step-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-icon.completed svg {
color: var(--color-success);
}
.step-icon.active {
position: relative;
}
.step-icon.active::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: var(--accent-brand);
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
.step-icon.pending svg {
opacity: 0.3;
}
.step-skill {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.375rem;
background: oklch(0.95 0.03 280);
border-radius: 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
color: oklch(0.45 0.15 280);
}
.step-skill.voice {
background: oklch(0.95 0.03 50);
color: oklch(0.45 0.15 50);
}
/* Draft Integrations */
.draft-integrations {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0;
margin-bottom: 0.75rem;
border-top: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
.draft-integrations-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 0.25rem;
}
.draft-integration-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
font-size: 0.6875rem;
font-weight: 500;
background: var(--muted);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
color: var(--muted-foreground);
cursor: pointer;
transition: all 0.15s ease;
}
.draft-integration-item:hover {
background: var(--card);
border-color: var(--border);
color: var(--foreground);
}
.draft-integration-item svg {
width: 12px;
height: 12px;
opacity: 0.7;
}
.draft-integration-item.connected {
background: oklch(0.96 0.02 145);
border-color: oklch(0.85 0.1 145);
color: var(--color-success);
}
.draft-integration-item.connected svg {
opacity: 1;
}
.draft-integration-item.wordpress {
--int-color: #21759b;
}
.draft-integration-item.wordpress.connected {
background: oklch(0.96 0.02 230);
border-color: oklch(0.85 0.08 230);
color: #21759b;
}
.draft-integration-item.notion {
--int-color: #000000;
}
.draft-integration-item.google-docs {
--int-color: #4285f4;
}
.draft-integration-item.google-docs.connected {
background: oklch(0.96 0.02 250);
border-color: oklch(0.85 0.08 250);
color: #4285f4;
}
.draft-integration-item.webflow {
--int-color: #4353ff;
}
.draft-integration-item.webflow.connected {
background: oklch(0.96 0.03 270);
border-color: oklch(0.85 0.1 270);
color: #4353ff;
}
.draft-integration-item.hubspot {
--int-color: #ff7a59;
}
.draft-integration-item.hubspot.connected {
background: oklch(0.96 0.03 40);
border-color: oklch(0.85 0.1 40);
color: #ff7a59;
}
.draft-integration-item.mcp {
--int-color: #10b981;
}
.draft-integration-item.mcp.connected {
background: oklch(0.96 0.03 160);
border-color: oklch(0.85 0.1 160);
color: #059669;
}
.draft-integration-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1rem;
font-weight: 400;
background: transparent;
border: 1px dashed var(--border);
border-radius: var(--radius);
color: var(--muted-foreground);
cursor: pointer;
transition: all 0.15s ease;
}
.draft-integration-add:hover {
border-color: var(--accent-brand);
color: var(--accent-brand);
border-style: solid;
}
/* =================================================================
INTEGRATIONS VIEW
================================================================= */
.integrations-header {
margin-bottom: 2rem;
}
.integrations-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 0.5rem;
}
.integrations-subtitle {
font-size: 0.9375rem;
color: var(--muted-foreground);
}
.integration-section {
margin-bottom: 2.5rem;
}
.integration-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-subtle);
}
.integration-section-title svg {
opacity: 0.6;
}
.integration-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.integration-card {
background: var(--card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
transition: all 0.2s ease;
}
.integration-card:hover {
border-color: var(--border);
box-shadow: var(--shadow-sm);
}
.integration-card.connected {
border-color: oklch(0.85 0.08 145);
}
.integration-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.integration-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--muted);
border-radius: var(--radius);
}
.integration-icon svg {
width: 22px;
height: 22px;
}
.integration-icon.mcp {
background: oklch(0.95 0.03 160);
color: #059669;
}
.integration-icon.google-analytics {
background: oklch(0.95 0.04 55);
color: #e37400;
}
.integration-icon.slack {
background: oklch(0.95 0.03 320);
color: #e01e5a;
}
.integration-icon.wordpress {
background: oklch(0.95 0.02 230);
color: #21759b;
}
.integration-icon.hubspot {
background: oklch(0.95 0.03 40);
color: #ff7a59;
}
.integration-icon.google-docs {
background: oklch(0.95 0.02 250);
color: #4285f4;
}
.integration-icon.notion {
background: var(--muted);
color: #000;
}
.integration-icon.webflow {
background: oklch(0.95 0.03 260);
color: #4353ff;
}
.integration-status {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--muted-foreground);
}
.integration-status.connected {
color: var(--color-success);
}
.integration-status.disconnected {
color: var(--muted-foreground);
}
.integration-status .status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.integration-status.connected .status-dot {
background: var(--color-success);
}
.integration-name {
font-size: 1rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 0.375rem;
}
.integration-description {
font-size: 0.8125rem;
color: var(--muted-foreground);
line-height: 1.5;
margin-bottom: 1rem;
}
.integration-stats {
display: flex;
gap: 1.5rem;
padding: 0.75rem 0;
margin-bottom: 0.75rem;
border-top: 1px solid var(--border-subtle);
}
.integration-stat {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.stat-value {
font-size: 1.125rem;
font-weight: 600;
color: var(--foreground);
}
.stat-label {
font-size: 0.6875rem;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.integration-action-btn {
width: 100%;
padding: 0.625rem 1rem;
font-size: 0.8125rem;
font-weight: 500;
background: var(--muted);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
color: var(--foreground);
cursor: pointer;
transition: all 0.15s ease;
}
.integration-action-btn:hover {
background: var(--card);
border-color: var(--border);
}
.integration-action-btn.connect {
background: var(--accent-brand);
border-color: var(--accent-brand);
color: white;
}
.integration-action-btn.connect:hover {
filter: brightness(1.1);
}
/* =================================================================
RESPONSIVE
================================================================= */
@media (max-width: 768px) {
:root {
--drawer-width: 100vw;
}
.app-container.drawer-open {
transform: none;
}
.main-content {
padding: 1rem;
}
.greeting-text {
font-size: 1.25rem;
}
.narrative-card {
padding: 1rem;
}
.surface-pills {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="app-container" id="app">
<!-- Top Navigation -->
<nav class="top-nav">
<div class="nav-logo">
<div class="nav-logo-icon"></div>
Boring Marketing
</div>
<div class="nav-actions">
<button class="nav-channel-selector">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
Search
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div style="width: 32px; height: 32px; background: var(--muted); border-radius: 50%;"></div>
</div>
</nav>
<!-- Main Content -->
<main class="main-content">
<!-- Greeting -->
<div class="greeting">
<h1 class="greeting-text">Good morning, James</h1>
<p class="greeting-subtext">Here's what matters today</p>
</div>
<!-- View Navigation -->
<div class="view-nav">
<a class="view-nav-item active" data-view="brief">Brief</a>
<a class="view-nav-item" data-view="actions">Actions</a>
<a class="view-nav-item" data-view="drafts">Drafts</a>
<a class="view-nav-item" data-view="integrations">Integrations</a>
</div>
<!-- BRIEF VIEW -->
<div class="view active" id="view-brief">
<!-- BMI Score Hero -->
<div class="bmi-hero">
<div class="bmi-hero-main">
<div class="bmi-hero-score">67</div>
<div class="bmi-hero-label">BMI Score</div>
<div class="bmi-hero-change positive">+3 from yesterday</div>
</div>
<div class="bmi-hero-chart">
<div class="mini-trend-bar" style="height: 45%;"></div>
<div class="mini-trend-bar" style="height: 48%;"></div>
<div class="mini-trend-bar" style="height: 52%;"></div>
<div class="mini-trend-bar" style="height: 55%;"></div>
<div class="mini-trend-bar" style="height: 58%;"></div>
<div class="mini-trend-bar" style="height: 63%;"></div>
<div class="mini-trend-bar" style="height: 67%;"></div>
</div>
</div>
<!-- Today's Summary Card -->
<div class="narrative-card">
<div class="narrative-header">
<div class="narrative-label">
<svg class="narrative-label-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20V10"></path>
<path d="M18 20V4"></path>
<path d="M6 20v-4"></path>
</svg>
What Changed Overnight
</div>
</div>
<div class="narrative-body">
<p>You're <strong>gaining ground in organic</strong> but <strong class="highlight">losing AI visibility</strong>. Competitor X launched 12 new pages this month targeting your keywords. Their strategy: quantity over quality. <strong>Your opportunity: quality depth.</strong></p>
<p style="margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground);">AI Overviews now appear on 34% of your tracked keywords. You're cited on only 8 of them. Competitors HubSpot and Semrush are pulling ahead.</p>
</div>
<button class="narrative-expand-btn" id="expand-brief">
<span>See full intelligence</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
</div>
<!-- Expanded Brief Content (hidden by default) -->
<div class="expanded-brief" id="expanded-brief" style="display: none;">
<!-- Surface Coverage -->
<div class="narrative-section">
<div class="narrative-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="9" x2="21" y2="9"></line>
<line x1="9" y1="21" x2="9" y2="9"></line>
</svg>
Surface Coverage
</div>
<div class="surface-coverage">
<div class="surface-row">
<span class="surface-label">Google Organic</span>
<div class="surface-bar-container">
<div class="surface-bar google" style="width: 73%;"></div>
</div>
<span class="surface-value">73%</span>
<span class="surface-trend">(stable)</span>
</div>
<div class="surface-row">
<span class="surface-label">AI Overviews</span>
<div class="surface-bar-container">
<div class="surface-bar aio" style="width: 23%;"></div>
</div>
<span class="surface-value">23%</span>
<span class="surface-trend declining">(declining ↓)</span>
</div>
<div class="surface-row">
<span class="surface-label">ChatGPT</span>
<div class="surface-bar-container">
<div class="surface-bar chatgpt" style="width: 48%;"></div>
</div>
<span class="surface-value">48%</span>
<span class="surface-trend">(stable)</span>
</div>
<div class="surface-row">
<span class="surface-label">Perplexity</span>
<div class="surface-bar-container">
<div class="surface-bar perplexity" style="width: 18%;"></div>
</div>
<span class="surface-value">18%</span>
<span class="surface-trend">(new)</span>
</div>
</div>
<div class="narrative-text" style="margin-top: 1rem;">
<p><strong>Weakest: AI Overviews.</strong> Competitors HubSpot and Semrush are getting cited more frequently. Key pattern: they have FAQ sections that match AI Overview formatting. You don't.</p>
</div>
</div>
<!-- Competitive Landscape -->
<div class="narrative-section">
<div class="narrative-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
Competitive Landscape
</div>
<table class="competitor-table">
<thead>
<tr>
<th>Competitor</th>
<th>Trend</th>
<th>Strategy</th>
<th>Threat Level</th>
</tr>
</thead>
<tbody>
<tr>
<td class="competitor-name">HubSpot</td>
<td><span class="competitor-trend stable">Stable</span></td>
<td>Incumbent</td>
<td><span class="threat-level threat-low">Low</span></td>
</tr>
<tr>
<td class="competitor-name">Competitor X</td>
<td><span class="competitor-trend up">Gaining ↑</span></td>
<td>Hub blitz (47 pages)</td>
<td><span class="threat-level threat-high">High</span></td>
</tr>
<tr>
<td class="competitor-name">Competitor Y</td>
<td><span class="competitor-trend up">Gaining ↑</span></td>
<td>AI-first content</td>
<td><span class="threat-level threat-medium">Medium</span></td>
</tr>
<tr>
<td class="competitor-name">Competitor Z</td>
<td><span class="competitor-trend down">Declining ↓</span></td>
<td>Stale content</td>
<td><span class="threat-level threat-low">Low</span></td>
</tr>
</tbody>
</table>
</div>
<!-- Emerging Signals -->
<div class="narrative-section">
<div class="narrative-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
</svg>
Emerging Signals
</div>
<div class="emerging-signals">
<div class="emerging-signal">
<span class="emerging-signal-icon" style="background: linear-gradient(135deg, #f97316, #ea580c); color: white;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</span>
<div class="emerging-signal-content">
<h4>"2026" freshness queries spiking (+35%)</h4>
<p>Your content still says 2025 in many places. Quick win: update titles and headers.</p>
</div>
</div>
<div class="emerging-signal">
<span class="emerging-signal-icon" style="background: linear-gradient(135deg, #15803D, #16a34a); color: white;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
<polyline points="17 6 23 6 23 12"/>
</svg>
</span>
<div class="emerging-signal-content">
<h4>"AI marketing" cluster growing rapidly</h4>
<p>You have 2 pages. Competitors average 8 pages. Content gap to fill.</p>
</div>
</div>
<div class="emerging-signal">
<span class="emerging-signal-icon" style="background: linear-gradient(135deg, #B91C1C, #dc2626); color: white;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<line x1="12" y1="9" x2="12" y2="13"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</span>
<div class="emerging-signal-content">
<h4>Video content appearing in SERPs more frequently</h4>
<p>Competitor Y testing video content, getting featured snippets. Monitor this.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Action Feed -->
<div class="section-header">
<div class="section-title">
<h2>Actions</h2>
<span class="section-meta">12 new &bull; $142K total</span>
</div>
</div>
<div class="filter-row">
<button class="filter-btn active">All</button>
<button class="filter-btn">Growth</button>
<button class="filter-btn">Win</button>
<button class="filter-btn">Threat</button>
<button class="filter-btn">Trend</button>
</div>
<div class="opportunity-list">
<!-- Opportunity 1 -->
<div class="opportunity-card" data-drawer="opportunity-1" data-signal="growth" data-keyword="content marketing strategies" data-value="$18K/mo" data-best-surface="AI Overview">
<div class="opportunity-header">
<span class="opportunity-signal signal-growth">Growth</span>
<span class="opportunity-value">$18K/mo</span>
</div>
<div class="opportunity-keyword">"content marketing strategies"</div>
<div class="opportunity-context">AI Overview appeared — you're not cited. Competitors HubSpot, Semrush are cited.</div>
<div class="surface-pills">
<div class="surface-pill">
<span class="surface-name">Google</span>
<span class="surface-status">#14</span>
</div>
<div class="surface-pill best">
<span class="surface-name">AI Overview</span>
<span class="surface-status">Not cited</span>
<span class="best-tag">Best ROI</span>
</div>
<div class="surface-pill">
<span class="surface-name">ChatGPT</span>
<span class="surface-status">12%</span>
</div>
<div class="surface-pill">
<span class="surface-name">Perplexity</span>
<span class="surface-status">8%</span>
</div>
</div>
<div class="opportunity-footer">
<span class="opportunity-action-hint">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
View details & generate draft
</span>
<span class="opportunity-time">2h ago</span>
</div>
<!-- Quick Action Button (appears on hover) -->
<button class="opportunity-quick-action" data-quick-generate="opportunity-1">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
Generate AIO Draft
</button>
</div>
<!-- Opportunity 2 -->
<div class="opportunity-card" data-drawer="opportunity-2" data-signal="win" data-keyword="marketing automation tools" data-value="$16K/mo" data-best-surface="Google">
<div class="opportunity-header">
<span class="opportunity-signal signal-win">Win</span>
<span class="opportunity-value">$16K/mo</span>
</div>
<div class="opportunity-keyword">"marketing automation tools"</div>
<div class="opportunity-context">Competitor dropped #2 to #7. Their page hasn't been updated since 2024. Gap open now.</div>
<div class="surface-pills">
<div class="surface-pill best">
<span class="surface-name">Google</span>
<span class="surface-status">Gap at #2</span>
<span class="best-tag">Best ROI</span>
</div>
<div class="surface-pill">
<span class="surface-name">AI Overview</span>
<span class="surface-status">Cited</span>
</div>
<div class="surface-pill">
<span class="surface-name">ChatGPT</span>
<span class="surface-status">34%</span>
</div>
</div>
<div class="opportunity-footer">
<span class="opportunity-action-hint">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
View details & generate draft
</span>
<span class="opportunity-time">5h ago</span>
</div>
<button class="opportunity-quick-action" data-quick-generate="opportunity-2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
Generate Google Draft
</button>
</div>
<!-- Opportunity 3 -->
<div class="opportunity-card" data-drawer="opportunity-3" data-signal="threat" data-keyword="email marketing software" data-value="$13K/mo" data-best-surface="Google">
<div class="opportunity-header">
<span class="opportunity-signal signal-threat">Threat</span>
<span class="opportunity-value">$13K/mo</span>
</div>
<div class="opportunity-keyword">"email marketing software"</div>
<div class="opportunity-context">You dropped 4 positions. New competitor page outranking yours with fresher content.</div>
<div class="surface-pills">
<div class="surface-pill best">
<span class="surface-name">Google</span>
<span class="surface-status">Dropped to #8</span>
<span class="best-tag">Defend</span>
</div>
<div class="surface-pill">
<span class="surface-name">AI Overview</span>
<span class="surface-status">Lost citation</span>
</div>
</div>
<div class="opportunity-footer">
<span class="opportunity-action-hint">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
View details & generate draft
</span>
<span class="opportunity-time">1d ago</span>
</div>
<button class="opportunity-quick-action" data-quick-generate="opportunity-3">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
Defend Position
</button>
</div>
<!-- Opportunity 4 -->
<div class="opportunity-card" data-drawer="opportunity-4" data-signal="trend" data-keyword="AI marketing tools" data-value="$22K/mo" data-best-surface="ChatGPT">
<div class="opportunity-header">
<span class="opportunity-signal signal-trend">Trend</span>
<span class="opportunity-value">$22K/mo</span>
</div>
<div class="opportunity-keyword">"AI marketing tools"</div>
<div class="opportunity-context">Search volume up 35%. Nobody owns this yet. First mover opportunity.</div>
<div class="surface-pills">
<div class="surface-pill">
<span class="surface-name">Google</span>
<span class="surface-status">Wide open</span>
</div>
<div class="surface-pill best">
<span class="surface-name">ChatGPT</span>
<span class="surface-status">No leader</span>
<span class="best-tag">First mover</span>
</div>
<div class="surface-pill">
<span class="surface-name">Perplexity</span>
<span class="surface-status">No leader</span>
</div>
</div>
<div class="opportunity-footer">
<span class="opportunity-action-hint">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
View details & generate draft
</span>
<span class="opportunity-time">3d ago</span>
</div>
<button class="opportunity-quick-action" data-quick-generate="opportunity-4">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
Generate LLM Draft
</button>
</div>
</div>
<!-- Recent Drafts -->
<div class="drafts-section">
<div class="section-header">
<div class="section-title">
<h2>Recent Drafts</h2>
<span class="section-meta">3 active</span>
</div>
</div>
<div class="draft-list">
<div class="draft-item">
<div class="draft-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
<polyline points="14,2 14,8 20,8"></polyline>
</svg>
</div>
<div class="draft-info">
<div class="draft-title">Content Marketing Strategies Guide</div>
<div class="draft-meta">4,127 words &bull; AIO-optimized &bull; Today</div>
</div>
<span class="draft-status status-draft">Draft</span>
</div>
<div class="draft-item">
<div class="draft-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
<polyline points="14,2 14,8 20,8"></polyline>
</svg>
</div>
<div class="draft-info">
<div class="draft-title">Marketing Automation Comparison</div>
<div class="draft-meta">2,104 words &bull; Google-optimized &bull; 2 days ago</div>
</div>
<span class="draft-status status-refined">Refined</span>
</div>
<div class="draft-item">
<div class="draft-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
<polyline points="14,2 14,8 20,8"></polyline>
</svg>
</div>
<div class="draft-info">
<div class="draft-title">Email Software Buyer's Guide</div>
<div class="draft-meta">4,211 words &bull; Exported to CMS &bull; 5 days ago</div>
</div>
<span class="draft-status status-exported">Exported</span>
</div>
</div>
</div>
</div>
<!-- ACTIONS VIEW (Full list) -->
<div class="view" id="view-actions">
<div class="actions-header">
<div>
<h2 style="font-size: 1.25rem; font-weight: 600;">All Opportunities</h2>
<p style="color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.25rem;">47 opportunities worth $312K/mo potential</p>
</div>
<div class="actions-sort">
<select class="actions-sort-select">
<option>Sort by Value</option>
<option>Sort by Date</option>
<option>Sort by Signal</option>
</select>
</div>
</div>
<div class="filter-row" style="margin-bottom: 1.25rem;">
<button class="filter-btn active">All (47)</button>
<button class="filter-btn">Growth (12)</button>
<button class="filter-btn">Win (8)</button>
<button class="filter-btn">Threat (15)</button>
<button class="filter-btn">Trend (7)</button>
<button class="filter-btn">Drift (5)</button>
</div>
<div class="actions-list">
<!-- Action 1 -->
<div class="action-row" data-drawer="opportunity-1">
<div class="action-signal-col">
<span class="opportunity-signal signal-growth">Growth</span>
</div>
<div class="action-main">
<div class="action-keyword">"content marketing strategies"</div>
<div class="action-context">AI Overview appeared — you're not cited. HubSpot, Semrush are cited.</div>
<div class="action-surfaces">
<span class="mini-surface google">Google #4</span>
<span class="mini-surface aio">AIO Not Cited</span>
<span class="mini-surface chatgpt">ChatGPT ✓</span>
</div>
</div>
<div class="action-value">$18K/mo</div>
</div>
<!-- Action 2 -->
<div class="action-row" data-drawer="opportunity-2">
<div class="action-signal-col">
<span class="opportunity-signal signal-threat">Threat</span>
</div>
<div class="action-main">
<div class="action-keyword">"email marketing software"</div>
<div class="action-context">You dropped from #3 to #8. Competitor X launched new comparison page.</div>
<div class="action-surfaces">
<span class="mini-surface google declining">Google #8 ↓5</span>
<span class="mini-surface aio">AIO Competitor</span>
</div>
</div>
<div class="action-value">$24K/mo</div>
</div>
<!-- Action 3 -->
<div class="action-row" data-drawer="opportunity-3">
<div class="action-signal-col">
<span class="opportunity-signal signal-win">Win</span>
</div>
<div class="action-main">
<div class="action-keyword">"B2B lead generation"</div>
<div class="action-context">Competitor Z page is outdated (2023). You can take their #2 spot.</div>
<div class="action-surfaces">
<span class="mini-surface google">Google #5</span>
<span class="mini-surface perplexity">Perplexity ✓</span>
</div>
</div>
<div class="action-value">$31K/mo</div>
</div>
<!-- Action 4 -->
<div class="action-row" data-drawer="opportunity-4">
<div class="action-signal-col">
<span class="opportunity-signal signal-trend">Trend</span>
</div>
<div class="action-main">
<div class="action-keyword">"AI marketing tools 2026"</div>
<div class="action-context">Search volume up 340% this month. No strong competitors yet.</div>
<div class="action-surfaces">
<span class="mini-surface google">Google Not Ranked</span>
<span class="mini-surface aio">AIO No Result</span>
</div>
</div>
<div class="action-value">$8K/mo</div>
</div>
<!-- Action 5 -->
<div class="action-row" data-drawer="opportunity-5">
<div class="action-signal-col">
<span class="opportunity-signal signal-drift">Drift</span>
</div>
<div class="action-main">
<div class="action-keyword">"marketing automation platforms"</div>
<div class="action-context">Competitor X launched hub strategy. 12 new pages targeting this cluster.</div>
<div class="action-surfaces">
<span class="mini-surface google declining">Google #6 ↓2</span>
<span class="mini-surface aio">AIO Competitor</span>
</div>
</div>
<div class="action-value">$42K/mo</div>
</div>
<!-- Action 6 -->
<div class="action-row" data-drawer="opportunity-6">
<div class="action-signal-col">
<span class="opportunity-signal signal-growth">Growth</span>
</div>
<div class="action-main">
<div class="action-keyword">"best CRM for small business"</div>
<div class="action-context">ChatGPT recommends you but Google doesn't rank you. Cross-surface gap.</div>
<div class="action-surfaces">
<span class="mini-surface google">Google #18</span>
<span class="mini-surface chatgpt positive">ChatGPT #2</span>
</div>
</div>
<div class="action-value">$15K/mo</div>
</div>
<!-- Action 7 -->
<div class="action-row" data-drawer="opportunity-7">
<div class="action-signal-col">
<span class="opportunity-signal signal-threat">Threat</span>
</div>
<div class="action-main">
<div class="action-keyword">"demand generation"</div>
<div class="action-context">AI Overview now appears, citing HubSpot's pillar page. Your traffic down 31%.</div>
<div class="action-surfaces">
<span class="mini-surface google">Google #2</span>
<span class="mini-surface aio declining">AIO Not Cited ↓31%</span>
</div>
</div>
<div class="action-value">$28K/mo</div>
</div>
<!-- Action 8 -->
<div class="action-row" data-drawer="opportunity-8">
<div class="action-signal-col">
<span class="opportunity-signal signal-win">Win</span>
</div>
<div class="action-main">
<div class="action-keyword">"sales enablement tools"</div>
<div class="action-context">Top result is thin content. You have depth. Add FAQ to dominate AI.</div>
<div class="action-surfaces">
<span class="mini-surface google">Google #4</span>
<span class="mini-surface aio">AIO Weak Competitor</span>
</div>
</div>
<div class="action-value">$19K/mo</div>
</div>
<div class="actions-load-more">
<button class="load-more-btn">Load 39 more opportunities</button>
</div>
</div>
</div>
<!-- DRAFTS VIEW -->
<div class="view" id="view-drafts">
<div class="drafts-header">
<div>
<h2 style="font-size: 1.25rem; font-weight: 600;">Content Drafts</h2>
<p style="color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.25rem;">8 drafts &bull; 3 ready for review</p>
</div>
</div>
<div class="drafts-filter-row">
<button class="filter-btn active">All (8)</button>
<button class="filter-btn">Ready (3)</button>
<button class="filter-btn">In Progress (2)</button>
<button class="filter-btn">Exported (3)</button>
</div>
<div class="drafts-list">
<!-- Draft 1 - Ready for review -->
<div class="draft-card" data-draft="1">
<div class="draft-card-header">
<span class="draft-status-badge status-ready">Ready for Review</span>
<span class="draft-date">Generated 2 hours ago</span>
</div>
<h3 class="draft-card-title">Content Marketing Strategies That Drive Results in 2026</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"content marketing strategies"</span>
<span class="draft-separator">&bull;</span>
<span>2,847 words</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$18K/mo opportunity</span>
</p>
<div class="draft-card-preview">
<p>In 2026, content marketing has evolved beyond blog posts and social shares. The most successful brands are building content ecosystems that work across...</p>
</div>
<div class="draft-integrations">
<span class="draft-integrations-label">Export to:</span>
<button class="draft-integration-item wordpress">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 19.5c-5.238 0-9.5-4.262-9.5-9.5S6.762 2.5 12 2.5s9.5 4.262 9.5 9.5-4.262 9.5-9.5 9.5zm-4.5-9.5c0 2.5.5 4.5 1.5 6l-3-8c0 .667.167 1.333.5 2h1zm4.5 7c-.833 0-1.583-.167-2.25-.5l2.5-7 2.5 6.5c-.917.667-1.833 1-2.75 1zm6-7c0-1-.167-1.917-.5-2.75L14 17l4-8c.333.667.5 1.5.5 2.5zm-6-5.5c1.333 0 2.5.417 3.5 1.25l-.5 2L12 6.5l-3 2.25-.5-2C9.5 5.917 10.667 5.5 12 5.5z"/></svg>
WordPress
</button>
<button class="draft-integration-item google-docs">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM8 13h8v1H8v-1zm0 3h8v1H8v-1zm0-6h4v1H8v-1z"/></svg>
Google Docs
</button>
<button class="draft-integration-item notion">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.166V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.934zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952l1.449.327s0 .84-1.168.84l-3.222.187c-.093-.187 0-.653.327-.746l.84-.233V9.854L7.822 9.62c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.14c-.093-.514.28-.887.747-.933zM2.24 1.688l13.402-.934c1.635-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.948c0-.839.374-1.54 1.355-1.26z"/></svg>
Notion
</button>
<button class="draft-integration-add" title="Add integration">+</button>
</div>
<div class="draft-card-actions">
<button class="draft-action-btn primary">Review & Edit</button>
<button class="draft-action-btn">Export to CMS</button>
<button class="draft-action-btn">Regenerate</button>
</div>
</div>
<!-- Draft 2 - Ready for review -->
<div class="draft-card" data-draft="2">
<div class="draft-card-header">
<span class="draft-status-badge status-ready">Ready for Review</span>
<span class="draft-date">Generated yesterday</span>
</div>
<h3 class="draft-card-title">B2B Lead Generation: The Complete Guide for 2026</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"B2B lead generation"</span>
<span class="draft-separator">&bull;</span>
<span>4,122 words</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$31K/mo opportunity</span>
</p>
<div class="draft-card-preview">
<p>B2B lead generation has transformed dramatically. Cold outreach is dying. Intent data is king. Here's how the best teams are filling their pipelines in 2026...</p>
</div>
<div class="draft-integrations">
<span class="draft-integrations-label">Export to:</span>
<button class="draft-integration-item webflow">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.803 6.105c-1.186.06-2.2.82-2.596 1.903-.396 1.082-.137 2.297.66 3.11-.996 2.47-3.076 4.26-5.607 4.832-.33-.62-.507-1.32-.507-2.05 0-2.485 2.015-4.5 4.5-4.5v-3c-4.142 0-7.5 3.358-7.5 7.5 0 1.095.238 2.133.663 3.07-1.233.43-2.094 1.59-2.094 2.93 0 1.725 1.4 3.125 3.125 3.125 1.574 0 2.87-1.166 3.086-2.68 3.334-.612 6.166-2.883 7.586-5.97 1.19.084 2.32-.477 2.921-1.49.6-1.015.565-2.287-.09-3.266-.656-.98-1.785-1.535-2.97-1.478l-.177-.006z"/></svg>
Webflow
</button>
<button class="draft-integration-item hubspot">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 10.5c-.5-1.1-1.5-1.9-2.7-2.1v-2c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2s-2 .9-2 2c0 .7.4 1.4 1 1.7v2c-.8.2-1.6.6-2.2 1.2l-5.1-3.2c0-.1.1-.3.1-.4 0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2c.4 0 .8-.1 1.1-.4l5.1 3.2c-.3.6-.5 1.3-.5 2s.2 1.4.5 2l-5.1 3.2c-.3-.2-.7-.4-1.1-.4-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2c0-.1 0-.3-.1-.4l5.1-3.2c.9 1 2.2 1.6 3.6 1.6 2.8 0 5-2.2 5-5 0-1.5-.7-2.9-1.7-3.8zM14 16c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg>
HubSpot
</button>
<button class="draft-integration-add" title="Add integration">+</button>
</div>
<div class="draft-card-actions">
<button class="draft-action-btn primary">Review & Edit</button>
<button class="draft-action-btn">Export to CMS</button>
<button class="draft-action-btn">Regenerate</button>
</div>
</div>
<!-- Draft 3 - In Progress -->
<div class="draft-card in-progress" data-draft="3">
<div class="draft-card-header">
<span class="draft-status-badge status-in-progress">Generating...</span>
<span class="draft-date">Started 5 min ago</span>
</div>
<h3 class="draft-card-title">AI Marketing Tools Comparison: ChatGPT vs Claude vs Gemini</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"AI marketing tools 2026"</span>
<span class="draft-separator">&bull;</span>
<span>~3,000 words estimated</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$8K/mo opportunity</span>
</p>
<div class="draft-progress-bar">
<div class="draft-progress-fill" style="width: 67%;"></div>
</div>
<div class="draft-reasoning">
<div class="draft-reasoning-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>
Intelligence in progress
</div>
<div class="reasoning-steps">
<div class="reasoning-step completed">
<span class="step-icon completed">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
</span>
<span>Extracted brand voice from 12 existing pages</span>
<span class="step-skill voice">brand-voice</span>
</div>
<div class="reasoning-step completed">
<span class="step-icon completed">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
</span>
<span>Analyzed 8 competitor pages for patterns</span>
</div>
<div class="reasoning-step completed">
<span class="step-icon completed">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
</span>
<span>Identified AI Overview citation structure</span>
</div>
<div class="reasoning-step active">
<span class="step-icon active"></span>
<span>Applying direct-response framework</span>
<span class="step-skill">direct-response-copy</span>
</div>
<div class="reasoning-step pending">
<span class="step-icon pending">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"></circle></svg>
</span>
<span>Generate FAQ for AI citation optimization</span>
</div>
</div>
</div>
</div>
<!-- Draft 4 - Ready for review -->
<div class="draft-card" data-draft="4">
<div class="draft-card-header">
<span class="draft-status-badge status-ready">Ready for Review</span>
<span class="draft-date">Generated 2 days ago</span>
</div>
<h3 class="draft-card-title">Sales Enablement Tools: What Actually Works in 2026</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"sales enablement tools"</span>
<span class="draft-separator">&bull;</span>
<span>3,456 words</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$19K/mo opportunity</span>
</p>
<div class="draft-card-preview">
<p>The sales enablement landscape is cluttered with tools that promise everything and deliver little. We've tested 47 platforms to find what actually moves the needle...</p>
</div>
<div class="draft-card-actions">
<button class="draft-action-btn primary">Review & Edit</button>
<button class="draft-action-btn">Export to CMS</button>
<button class="draft-action-btn">Regenerate</button>
</div>
</div>
<!-- Draft 5 - Exported -->
<div class="draft-card exported" data-draft="5">
<div class="draft-card-header">
<span class="draft-status-badge status-exported">Exported</span>
<span class="draft-date">Published 3 days ago</span>
</div>
<h3 class="draft-card-title">Email Marketing Software Buyer's Guide 2026</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"email marketing software"</span>
<span class="draft-separator">&bull;</span>
<span>4,211 words</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$24K/mo opportunity</span>
</p>
<div class="draft-integrations">
<span class="draft-integrations-label">Published to:</span>
<button class="draft-integration-item wordpress connected">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
WordPress
</button>
<button class="draft-integration-item google-docs connected">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
Google Docs
</button>
</div>
<div class="draft-card-actions">
<button class="draft-action-btn">View Published</button>
<button class="draft-action-btn">Track Rankings</button>
</div>
</div>
<!-- Draft 6 - In Progress (earlier stage) -->
<div class="draft-card in-progress" data-draft="6">
<div class="draft-card-header">
<span class="draft-status-badge status-in-progress">Researching...</span>
<span class="draft-date">Started 12 min ago</span>
</div>
<h3 class="draft-card-title">Demand Generation Playbook: How Top B2B Teams Win</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"demand generation"</span>
<span class="draft-separator">&bull;</span>
<span>~4,500 words estimated</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$28K/mo opportunity</span>
</p>
<div class="draft-progress-bar">
<div class="draft-progress-fill" style="width: 23%;"></div>
</div>
<div class="draft-reasoning">
<div class="draft-reasoning-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>
Intelligence in progress
</div>
<div class="reasoning-steps">
<div class="reasoning-step completed">
<span class="step-icon completed">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
</span>
<span>Loaded brief context (THREAT signal)</span>
</div>
<div class="reasoning-step active">
<span class="step-icon active"></span>
<span>Analyzing top 5 competitor pages</span>
</div>
<div class="reasoning-step pending">
<span class="step-icon pending">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"></circle></svg>
</span>
<span>Extract brand voice patterns</span>
<span class="step-skill voice">brand-voice</span>
</div>
<div class="reasoning-step pending">
<span class="step-icon pending">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"></circle></svg>
</span>
<span>Apply SEO content structure</span>
<span class="step-skill">seo-content</span>
</div>
<div class="reasoning-step pending">
<span class="step-icon pending">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"></circle></svg>
</span>
<span>Optimize for AI Overview citation</span>
</div>
</div>
</div>
</div>
<!-- Draft 7 - Exported -->
<div class="draft-card exported" data-draft="7">
<div class="draft-card-header">
<span class="draft-status-badge status-exported">Exported</span>
<span class="draft-date">Published 1 week ago</span>
</div>
<h3 class="draft-card-title">Marketing Automation Platforms: The Complete Comparison</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"marketing automation platforms"</span>
<span class="draft-separator">&bull;</span>
<span>5,678 words</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$42K/mo opportunity</span>
</p>
<div class="draft-integrations">
<span class="draft-integrations-label">Published to:</span>
<button class="draft-integration-item hubspot connected">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
HubSpot CMS
</button>
</div>
<div class="draft-card-actions">
<button class="draft-action-btn">View Published</button>
<button class="draft-action-btn">Track Rankings</button>
</div>
</div>
<!-- Draft 8 - Exported -->
<div class="draft-card exported" data-draft="8">
<div class="draft-card-header">
<span class="draft-status-badge status-exported">Exported</span>
<span class="draft-date">Published 2 weeks ago</span>
</div>
<h3 class="draft-card-title">Best CRM for Small Business: 2026 Buyer's Guide</h3>
<p class="draft-card-meta">
<span class="draft-keyword">"best CRM for small business"</span>
<span class="draft-separator">&bull;</span>
<span>3,890 words</span>
<span class="draft-separator">&bull;</span>
<span class="draft-value">$15K/mo opportunity</span>
</p>
<div class="draft-card-actions">
<button class="draft-action-btn">View Published</button>
<button class="draft-action-btn">Track Rankings</button>
</div>
</div>
</div>
</div>
<!-- INTEGRATIONS VIEW -->
<div class="view" id="view-integrations">
<div class="integrations-header">
<h2 class="integrations-title">Connected Integrations</h2>
<p class="integrations-subtitle">Integrations power intelligence gathering and content publishing</p>
</div>
<!-- Intelligence Integrations -->
<div class="integration-section">
<h3 class="integration-section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
Intelligence Sources
</h3>
<div class="integration-grid">
<!-- MCP -->
<div class="integration-card connected">
<div class="integration-card-header">
<div class="integration-icon mcp">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
<polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
</div>
<div class="integration-status connected">
<span class="status-dot"></span>
Connected
</div>
</div>
<h4 class="integration-name">MCP (Model Context Protocol)</h4>
<p class="integration-description">Powers competitor page scraping, real-time SERP analysis, and AI Overview monitoring</p>
<div class="integration-stats">
<div class="integration-stat">
<span class="stat-value">847</span>
<span class="stat-label">Pages analyzed today</span>
</div>
<div class="integration-stat">
<span class="stat-value">23</span>
<span class="stat-label">Competitors tracked</span>
</div>
</div>
<button class="integration-action-btn">Manage Connection</button>
</div>
<!-- Google Analytics -->
<div class="integration-card connected">
<div class="integration-card-header">
<div class="integration-icon google-analytics">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M22.84 2.9982v17.9987c.0086.267-.0983.5765-.2907.7689-.1925.1924-.5765.2993-.7689.2907H7.4668c-.5765 0-1.0472-.4707-1.0472-1.0596v-3.1432c0-.5765.4707-1.0472 1.0472-1.0472.5765 0 1.0472.4707 1.0472 1.0472v2.096h12.2316V4.0454H8.514v2.096c0 .5765-.4707 1.0472-1.0472 1.0472-.5765 0-1.0472-.4707-1.0472-1.0472V2.9982c-.0086-.267.0983-.5765.2907-.7689.1924-.1924.5765-.2993.7689-.2907h14.3136c.5765 0 1.0472.4707 1.0472 1.0596z"/>
<path d="M5.371 22.226c-1.424 0-2.619-1.195-2.619-2.619s1.195-2.619 2.619-2.619 2.619 1.195 2.619 2.619-1.195 2.619-2.619 2.619z"/>
<path d="M5.371 15.012c-1.424 0-2.619-1.195-2.619-2.619s1.195-2.619 2.619-2.619 2.619 1.195 2.619 2.619-1.195 2.619-2.619 2.619z"/>
<path d="M5.371 7.798c-1.424 0-2.619-1.195-2.619-2.619S3.947 2.56 5.371 2.56s2.619 1.195 2.619 2.619-1.195 2.619-2.619 2.619z"/>
</svg>
</div>
<div class="integration-status connected">
<span class="status-dot"></span>
Connected
</div>
</div>
<h4 class="integration-name">Google Analytics</h4>
<p class="integration-description">Conversion rates and traffic data power accurate dollar value calculations</p>
<div class="integration-stats">
<div class="integration-stat">
<span class="stat-value">2.4%</span>
<span class="stat-label">Avg conversion rate</span>
</div>
<div class="integration-stat">
<span class="stat-value">$847</span>
<span class="stat-label">Avg customer value</span>
</div>
</div>
<button class="integration-action-btn">Manage Connection</button>
</div>
<!-- Slack -->
<div class="integration-card connected">
<div class="integration-card-header">
<div class="integration-icon slack">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
</svg>
</div>
<div class="integration-status connected">
<span class="status-dot"></span>
Connected
</div>
</div>
<h4 class="integration-name">Slack</h4>
<p class="integration-description">Daily briefs to #marketing, instant alerts for THREAT signals, share opportunities with team</p>
<div class="integration-stats">
<div class="integration-stat">
<span class="stat-value">47</span>
<span class="stat-label">Alerts this week</span>
</div>
<div class="integration-stat">
<span class="stat-value">7:00 AM</span>
<span class="stat-label">Daily brief</span>
</div>
</div>
<button class="integration-action-btn">Manage Channels</button>
</div>
</div>
</div>
<!-- Publishing Integrations -->
<div class="integration-section">
<h3 class="integration-section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
Publishing Destinations
</h3>
<div class="integration-grid">
<!-- WordPress -->
<div class="integration-card connected">
<div class="integration-card-header">
<div class="integration-icon wordpress">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.5 15.5L6 9h2.5l2 5.5 2-5.5H15l-4.5 8.5z"/>
</svg>
</div>
<div class="integration-status connected">
<span class="status-dot"></span>
Connected
</div>
</div>
<h4 class="integration-name">WordPress</h4>
<p class="integration-description">blog.boringmarketing.com</p>
<div class="integration-stats">
<div class="integration-stat">
<span class="stat-value">12</span>
<span class="stat-label">Drafts published</span>
</div>
</div>
<button class="integration-action-btn">Manage</button>
</div>
<!-- HubSpot -->
<div class="integration-card connected">
<div class="integration-card-header">
<div class="integration-icon hubspot">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M18.164 7.93V5.084a2.198 2.198 0 001.267-1.978v-.066A2.198 2.198 0 0017.235.844h-.066a2.198 2.198 0 00-2.196 2.196v.066c0 .835.47 1.56 1.157 1.93v2.895a5.988 5.988 0 00-3.477 1.786l-7.194-5.588A2.86 2.86 0 005.312 2.2a2.868 2.868 0 10.702 4.592l6.767 5.254a6.038 6.038 0 00.007 4.093l-6.78 5.266A2.868 2.868 0 103.138 24a2.868 2.868 0 002.032-4.897l7.152-5.553a6.006 6.006 0 103.556-10.56 5.983 5.983 0 002.286 4.94z"/>
</svg>
</div>
<div class="integration-status connected">
<span class="status-dot"></span>
Connected
</div>
</div>
<h4 class="integration-name">HubSpot CMS</h4>
<p class="integration-description">boringmarketing.com</p>
<div class="integration-stats">
<div class="integration-stat">
<span class="stat-value">5</span>
<span class="stat-label">Drafts published</span>
</div>
</div>
<button class="integration-action-btn">Manage</button>
</div>
<!-- Google Docs -->
<div class="integration-card connected">
<div class="integration-card-header">
<div class="integration-icon google-docs">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM8 13h8v1H8v-1zm0 3h8v1H8v-1zm0-6h4v1H8v-1z"/>
</svg>
</div>
<div class="integration-status connected">
<span class="status-dot"></span>
Connected
</div>
</div>
<h4 class="integration-name">Google Docs</h4>
<p class="integration-description">Marketing Team folder</p>
<div class="integration-stats">
<div class="integration-stat">
<span class="stat-value">8</span>
<span class="stat-label">Drafts exported</span>
</div>
</div>
<button class="integration-action-btn">Manage</button>
</div>
<!-- Notion -->
<div class="integration-card">
<div class="integration-card-header">
<div class="integration-icon notion">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.98-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466l1.823 1.447zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.886l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952l1.448.327s0 .84-1.168.84l-3.22.186c-.094-.187 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.454-.233 4.764 7.279v-6.44l-1.215-.14c-.093-.514.28-.886.747-.933l3.222-.187z"/>
</svg>
</div>
<div class="integration-status disconnected">
<span class="status-dot"></span>
Not connected
</div>
</div>
<h4 class="integration-name">Notion</h4>
<p class="integration-description">Export drafts to your Notion workspace</p>
<button class="integration-action-btn connect">Connect Notion</button>
</div>
<!-- Webflow -->
<div class="integration-card">
<div class="integration-card-header">
<div class="integration-icon webflow">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M17.802 8.56s-1.946 6.027-2.077 6.448c-.05-.404-1.07-6.448-1.07-6.448C13.5 5.16 10.488 5.035 9.133 8.56c0 0-2.15 5.766-2.295 6.158-.012-.295-.224-6.162-.224-6.162C6.52 4.96 3.51 5.029 2.304 8.037L0 16.062h4.312l1.167-3.53s1.924-6.052 2.028-6.37c.035.314 1.09 9.9 1.09 9.9h4.086l2.637-6.382c-.02.28.075 6.382.075 6.382h4.233l1.353-6.343C21.746 5.028 18.988 5.004 17.802 8.56z"/>
</svg>
</div>
<div class="integration-status disconnected">
<span class="status-dot"></span>
Not connected
</div>
</div>
<h4 class="integration-name">Webflow</h4>
<p class="integration-description">Publish directly to your Webflow CMS</p>
<button class="integration-action-btn connect">Connect Webflow</button>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Drawer Overlay -->
<div class="drawer-overlay" id="drawer-overlay"></div>
<!-- Right Side Drawer -->
<div class="drawer" id="drawer">
<!-- Default Content State -->
<div id="drawer-content">
<div class="drawer-header">
<div class="drawer-title-section">
<span class="opportunity-signal signal-growth drawer-signal">Growth Opportunity</span>
<h2 class="drawer-keyword">"content marketing strategies"</h2>
<div class="drawer-value">$18K/mo potential</div>
</div>
<button class="drawer-close" id="drawer-close">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="drawer-body">
<!-- What's Happening -->
<div class="drawer-section">
<div class="drawer-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
What's Happening
</div>
<div class="drawer-text">
<p>AI Overview now appears on <strong>64% of searches</strong> for this keyword. You're not cited. Competitors HubSpot and Semrush are.</p>
<p>This is a <strong>GROWTH signal</strong> — AI visibility is expanding and you can capture citations before the format stabilizes.</p>
</div>
</div>
<!-- Where to Attack -->
<div class="drawer-section">
<div class="drawer-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
Where to Attack
</div>
<div class="surface-breakdown-mini">
<div class="surface-row-mini">
<div class="surface-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
</div>
<div class="surface-info">
<div class="surface-name">Google Organic</div>
<div class="surface-position">Currently #14 — need freshness + depth</div>
</div>
<div class="surface-impact">
<div class="impact-value">$8K/mo</div>
<div class="impact-effort">High effort</div>
</div>
</div>
<div class="surface-row-mini recommended">
<div class="surface-icon" style="background: linear-gradient(135deg, var(--accent-brand-light), #fff); border: 1px solid rgba(217, 119, 6, 0.2);">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-brand)" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 2a4.5 4.5 0 0 0 0 9 4.5 4.5 0 0 1 0 9"/>
<path d="M12 7v2"/>
<path d="M12 15v2"/>
</svg>
</div>
<div class="surface-info">
<div class="surface-name">AI Overview <span class="best-tag">Best ROI</span></div>
<div class="surface-position">Not cited — add FAQ structure</div>
</div>
<div class="surface-impact">
<div class="impact-value">$12K/mo</div>
<div class="impact-effort">Medium effort</div>
</div>
</div>
<div class="surface-row-mini">
<div class="surface-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
</div>
<div class="surface-info">
<div class="surface-name">ChatGPT</div>
<div class="surface-position">12% mention rate — need comprehensive resource</div>
</div>
<div class="surface-impact">
<div class="impact-value">$6K/mo</div>
<div class="impact-effort">High effort</div>
</div>
</div>
<div class="surface-row-mini">
<div class="surface-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
<path d="M11 8v6"/>
<path d="M8 11h6"/>
</svg>
</div>
<div class="surface-info">
<div class="surface-name">Perplexity</div>
<div class="surface-position">8% mention rate — need authority signals</div>
</div>
<div class="surface-impact">
<div class="impact-value">$4K/mo</div>
<div class="impact-effort">High effort</div>
</div>
</div>
</div>
</div>
<!-- Why They're Winning -->
<div class="drawer-section">
<div class="drawer-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
Why They're Winning
</div>
<div class="competitor-insight">
<div class="competitor-insight-header">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent-brand)" stroke-width="2" style="flex-shrink: 0;">
<line x1="18" y1="20" x2="18" y2="10"/>
<line x1="12" y1="20" x2="12" y2="4"/>
<line x1="6" y1="20" x2="6" y2="14"/>
</svg>
Cited pages share these patterns:
</div>
<ul>
<li>FAQ sections (AI Overview pulls directly)</li>
<li>Original statistics with clear sourcing</li>
<li>2025/2026 freshness in title + H2s</li>
<li>Average word count: 3,847</li>
<li>Schema: FAQ + HowTo</li>
</ul>
<div class="your-gap">
<strong>Your page:</strong> No FAQ, last updated March 2024, 1,847 words, no schema
</div>
</div>
</div>
<!-- Gap to Exploit -->
<div class="drawer-section">
<div class="drawer-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
</svg>
Gap to Exploit
</div>
<div class="drawer-text">
<p><strong>None of the top 5 cover:</strong></p>
</div>
<ul class="gap-list-mini">
<li>AI-assisted content strategy workflows (emerging topic)</li>
<li>2026 algorithm changes impact</li>
<li>Content distribution beyond SEO</li>
</ul>
</div>
<!-- Dollar Math -->
<div class="drawer-section">
<div class="drawer-section-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
The Math
</div>
<div style="font-family: var(--font-mono); font-size: 0.75rem; background: var(--muted); padding: 0.75rem; border-radius: var(--radius);">
<div>14,800 searches × 2.1% CTR × 3.2% conv × $580 LTV</div>
<div style="font-weight: 600; margin-top: 0.25rem;">= $18,200/month potential</div>
<div style="color: var(--muted-foreground); font-size: 0.6875rem; margin-top: 0.25rem;">Currently capturing: ~$0</div>
</div>
</div>
</div>
<div class="drawer-footer">
<button class="drawer-cta-primary" id="generate-draft-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
Generate AIO-Optimized Draft
<span class="kbd-hint">G</span>
</button>
<div class="drawer-cta-meta">
<span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
</svg>
~3,500 words
</span>
<span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
~2 min
</span>
<span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
FAQ structure
</span>
</div>
<div class="drawer-secondary-actions">
<button class="drawer-cta-secondary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
Copy Brief
</button>
<button class="drawer-cta-secondary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
Other Surfaces
</button>
</div>
</div>
</div>
<!-- Generating State -->
<div class="generating-state" id="generating-state">
<div class="generating-spinner"></div>
<h3 class="generating-title">Creating intelligence-driven draft</h3>
<p class="generating-subtitle">"content marketing strategies" — $18K/mo opportunity</p>
<div class="generating-progress">
<div class="progress-item complete" id="progress-1">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<span>Extracted brand voice from 12 pages</span>
<span class="step-skill voice">brand-voice</span>
</div>
<div class="progress-item complete" id="progress-2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<span>Analyzed 6 competitor pages</span>
</div>
<div class="progress-item active" id="progress-3">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
</svg>
<span>Applying SEO content structure</span>
<span class="step-skill">seo-content</span>
</div>
<div class="progress-item" id="progress-4">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
</svg>
<span>Building AI Overview citation structure</span>
</div>
<div class="progress-item" id="progress-5">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
</svg>
<span>Generating FAQ schema for AIO</span>
</div>
</div>
</div>
<!-- Draft Preview State (shown after generation completes) -->
<div class="draft-preview-state" id="draft-preview-state">
<div class="draft-preview-header">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div class="draft-preview-success">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
Draft generated
</div>
<button class="drawer-close" id="preview-close">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
<h2 class="draft-preview-title">Content Marketing Strategies: The Complete Guide for 2026</h2>
<div class="draft-preview-meta">
<span>3,847 words</span>
<span>AIO-optimized</span>
<span>FAQ schema included</span>
</div>
</div>
<div class="draft-preview-body">
<div class="draft-preview-content">
<h1>Content Marketing Strategies: The Complete Guide for 2026</h1>
<p>Content marketing has evolved dramatically. In 2026, success requires more than just publishing—it requires strategic positioning across search, AI, and social surfaces. This comprehensive guide covers everything you need to build a content marketing strategy that drives measurable results.</p>
<h2>What is Content Marketing?</h2>
<p>Content marketing is a strategic marketing approach focused on creating and distributing valuable, relevant, and consistent content to attract and retain a clearly defined audience—and, ultimately, to drive profitable customer action.</p>
<h2>Why Content Marketing Matters in 2026</h2>
<p>The marketing landscape has fundamentally shifted. AI-powered search surfaces like Google's AI Overviews, ChatGPT, and Perplexity now mediate how buyers discover solutions. Brands that optimize for these surfaces capture demand; those that don't, lose it.</p>
<h2>Building Your Content Strategy</h2>
<p>A successful content marketing strategy in 2026 requires three pillars: audience understanding, surface optimization, and measurement. Let's break down each one...</p>
<div class="faq-section">
<div class="faq-label">FAQ Section — AI Overview Optimized</div>
<div class="faq-question">What is the most effective content marketing strategy?</div>
<div class="faq-answer">The most effective content marketing strategy combines audience research, multi-surface optimization (Google, AI Overviews, LLMs), and continuous measurement. Focus on creating comprehensive resources that answer specific questions rather than broad topics.</div>
</div>
<div class="faq-section">
<div class="faq-label">FAQ Section — AI Overview Optimized</div>
<div class="faq-question">How do I create a content marketing plan?</div>
<div class="faq-answer">Create a content marketing plan by: 1) Identifying your target audience and their questions, 2) Auditing existing content for gaps, 3) Mapping content to buyer journey stages, 4) Optimizing for search and AI surfaces, and 5) Setting measurable KPIs.</div>
</div>
<p style="color: var(--muted-foreground); font-style: italic; margin-top: 2rem;">[Draft continues with 8 more sections covering: Content Types, Distribution, Measurement, Team Structure, Tools, Case Studies, Common Mistakes, and Next Steps...]</p>
</div>
</div>
<div class="draft-preview-footer">
<div class="draft-preview-actions">
<button class="btn btn-secondary" id="back-to-brief-btn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="m15 18-6-6 6-6"></path>
</svg>
Back to Brief
</button>
<button class="btn btn-brand" id="open-in-editor-btn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
Open in Editor
<span class="kbd-hint">E</span>
</button>
</div>
</div>
</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast"></div>
<script>
// Elements
const app = document.getElementById('app');
const drawer = document.getElementById('drawer');
const drawerOverlay = document.getElementById('drawer-overlay');
const drawerClose = document.getElementById('drawer-close');
const drawerContent = document.getElementById('drawer-content');
const generatingState = document.getElementById('generating-state');
const draftPreviewState = document.getElementById('draft-preview-state');
const generateDraftBtn = document.getElementById('generate-draft-btn');
const backToBriefBtn = document.getElementById('back-to-brief-btn');
const openInEditorBtn = document.getElementById('open-in-editor-btn');
const previewClose = document.getElementById('preview-close');
const toast = document.getElementById('toast');
// Open drawer when clicking opportunity card (but not quick action button)
document.querySelectorAll('[data-drawer]').forEach(card => {
card.addEventListener('click', (e) => {
// Don't open drawer if clicking quick action button
if (e.target.closest('.opportunity-quick-action')) {
return;
}
openDrawer();
});
});
// Quick action buttons on cards
document.querySelectorAll('[data-quick-generate]').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const card = btn.closest('.opportunity-card');
const keyword = card.dataset.keyword;
const surface = card.dataset.bestSurface;
// Add loading state
btn.classList.add('loading');
showToast(`Generating ${surface} draft for "${keyword}"...`);
// Simulate generation then open drawer with preview
setTimeout(() => {
btn.classList.remove('loading');
openDrawer();
showDrawerState('preview');
showToast(`Draft ready! Review and edit below.`);
}, 1500);
});
});
// Close drawer
drawerClose.addEventListener('click', closeDrawer);
drawerOverlay.addEventListener('click', closeDrawer);
previewClose.addEventListener('click', closeDrawer);
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
// Escape closes drawer
if (e.key === 'Escape') closeDrawer();
// 'G' generates draft when drawer is open showing content
if (e.key === 'g' && drawer.classList.contains('open') &&
drawerContent.style.display === 'flex' && !e.metaKey && !e.ctrlKey) {
e.preventDefault();
generateDraftBtn.click();
}
// 'E' opens in editor when viewing preview
if (e.key === 'e' && drawer.classList.contains('open') &&
draftPreviewState.classList.contains('active') && !e.metaKey && !e.ctrlKey) {
e.preventDefault();
openInEditorBtn.click();
}
});
function openDrawer() {
drawer.classList.add('open');
drawerOverlay.classList.add('open');
app.classList.add('drawer-open');
document.body.style.overflow = 'hidden';
// Reset to content state
showDrawerState('content');
}
function closeDrawer() {
drawer.classList.remove('open');
drawerOverlay.classList.remove('open');
app.classList.remove('drawer-open');
document.body.style.overflow = '';
// Reset drawer state after close animation
setTimeout(() => {
showDrawerState('content');
resetProgressItems();
}, 300);
}
function showDrawerState(state) {
// Hide all states
drawerContent.style.display = 'none';
generatingState.classList.remove('active');
draftPreviewState.classList.remove('active');
// Show requested state
if (state === 'content') {
drawerContent.style.display = 'flex'; // Must be flex for scroll to work!
} else if (state === 'generating') {
generatingState.classList.add('active');
} else if (state === 'preview') {
draftPreviewState.classList.add('active');
}
}
function resetProgressItems() {
document.querySelectorAll('.progress-item').forEach((item, i) => {
item.classList.remove('complete', 'active');
if (i === 0) item.classList.add('complete');
if (i === 1) item.classList.add('active');
});
}
// Generate draft button
generateDraftBtn.addEventListener('click', () => {
// Show generating state
showDrawerState('generating');
// Simulate progress
let step = 1;
const interval = setInterval(() => {
step++;
if (step <= 4) {
document.getElementById(`progress-${step - 1}`).classList.remove('active');
document.getElementById(`progress-${step - 1}`).classList.add('complete');
document.getElementById(`progress-${step}`).classList.add('active');
}
if (step > 4) {
clearInterval(interval);
document.getElementById('progress-4').classList.remove('active');
document.getElementById('progress-4').classList.add('complete');
// Show draft preview instead of closing
setTimeout(() => {
showDrawerState('preview');
}, 500);
}
}, 800);
});
// Back to brief button
backToBriefBtn.addEventListener('click', () => {
showDrawerState('content');
resetProgressItems();
});
// Open in editor button
openInEditorBtn.addEventListener('click', () => {
closeDrawer();
showToast('Draft saved! Opening in editor...');
});
// Toast notification
function showToast(message, duration = 3000) {
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, duration);
}
// View navigation
document.querySelectorAll('[data-view]').forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault();
const viewId = el.getAttribute('data-view');
// Update nav
document.querySelectorAll('.view-nav-item').forEach(nav => {
nav.classList.remove('active');
if (nav.getAttribute('data-view') === viewId) {
nav.classList.add('active');
}
});
// Update views
document.querySelectorAll('.view').forEach(view => {
view.classList.remove('active');
});
document.getElementById('view-' + viewId).classList.add('active');
});
});
// Filter buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
// Copy Brief button
document.querySelector('.drawer-cta-secondary').addEventListener('click', () => {
showToast('Brief copied to clipboard!');
});
// Expand Brief toggle
const expandBriefBtn = document.getElementById('expand-brief');
const expandedBrief = document.getElementById('expanded-brief');
if (expandBriefBtn && expandedBrief) {
expandBriefBtn.addEventListener('click', () => {
const isExpanded = expandedBrief.style.display !== 'none';
expandedBrief.style.display = isExpanded ? 'none' : 'block';
// Update button text and icon
const btnText = expandBriefBtn.querySelector('span');
const btnIcon = expandBriefBtn.querySelector('svg');
if (isExpanded) {
btnText.textContent = 'See full intelligence';
btnIcon.style.transform = 'rotate(0deg)';
} else {
btnText.textContent = 'Hide full intelligence';
btnIcon.style.transform = 'rotate(180deg)';
}
});
}
// Action row clicks open drawer
document.querySelectorAll('.action-row').forEach(row => {
row.addEventListener('click', (e) => {
const drawerId = row.getAttribute('data-drawer');
if (drawerId) {
openDrawer();
}
});
});
// Draft card review button clicks
document.querySelectorAll('.draft-action-btn.primary').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
openDrawer();
// Show draft preview state
if (drawerContent && draftPreviewState) {
drawerContent.style.display = 'none';
draftPreviewState.style.display = 'flex';
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment