<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Consultation — sfpermits.ai</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="obsidian-tokens.css">
<style>
.page-body { padding-top: 56px; }
/* Query header */
.query-section { padding: var(--space-6) 0 var(--space-4); }
.query-text {
font-family: var(--sans); font-size: var(--text-lg); font-weight: 300;
color: var(--text-primary); line-height: 1.5;
}
.query-property {
display: inline-flex; align-items: center; gap: var(--space-2);
margin-top: var(--space-3);
}
.query-property__check {
width: 16px; height: 16px; border-radius: var(--radius-full);
background: rgba(52, 211, 153, 0.15); border: 1px solid rgba(52, 211, 153, 0.3);
display: flex; align-items: center; justify-content: center;
}
.query-property__check svg { color: var(--signal-green); }
.query-property__addr {
font-family: var(--mono); font-size: var(--text-sm); color: var(--accent);
}
/* AI label */
.ai-label {
display: flex; align-items: center; gap: var(--space-2);
font-family: var(--mono); font-size: var(--text-xs); color: var(--accent);
margin-bottom: var(--space-4);
}
.ai-label__sparkle { font-size: 14px; }
.ai-label__date { color: var(--text-tertiary); }
/* Response card */
.response-card {
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-6);
margin-bottom: var(--space-6);
position: relative;
overflow: hidden;
}
.response-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-ring), transparent);
}
/* Review path callout */
.review-path {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
margin-bottom: var(--space-5);
border-left: 2px solid;
}
.review-path--inhouse {
background: rgba(251, 191, 36, 0.06);
border-left-color: var(--signal-amber);
}
.review-path--otc {
background: rgba(52, 211, 153, 0.06);
border-left-color: var(--signal-green);
}
.review-path__badge {
display: flex; align-items: baseline; gap: var(--space-3);
margin-bottom: 4px;
}
.review-path__label {
font-family: var(--mono); font-size: var(--text-sm); font-weight: 400;
}
.review-path--inhouse .review-path__label { color: var(--signal-amber); }
.review-path--otc .review-path__label { color: var(--signal-green); }
.review-path__why {
font-family: var(--sans); font-size: var(--text-xs); color: var(--text-tertiary);
}
.review-path__note {
font-family: var(--sans); font-size: var(--text-sm); font-weight: 300;
color: var(--text-secondary); line-height: 1.5;
}
.response-headline {
font-family: var(--sans); font-size: var(--text-xl); font-weight: 300;
margin-bottom: var(--space-2);
}
.response-summary {
font-family: var(--sans); font-size: var(--text-base); font-weight: 300;
color: var(--text-primary); line-height: 1.65;
margin-bottom: var(--space-6);
}
/* Detail cards inside response */
.detail-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
margin-bottom: var(--space-6);
}
.detail-card {
background: var(--glass); border: 1px solid var(--glass-border);
border-radius: var(--radius-sm); padding: var(--space-4);
transition: border-color 0.2s;
}
.detail-card:hover { border-color: var(--glass-hover); }
.detail-card__label {
font-family: var(--mono); font-size: var(--text-xs); font-weight: 400;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
margin-bottom: var(--space-2);
}
.detail-card__value {
font-family: var(--mono); font-size: var(--text-lg); font-weight: 300;
color: var(--text-primary); margin-bottom: 2px;
}
.detail-card__note {
font-family: var(--sans); font-size: var(--text-xs); color: var(--text-secondary);
line-height: 1.4;
}
/* Permit checklist */
.permit-checklist { margin-bottom: var(--space-6); }
.permit-checklist__title {
font-family: var(--mono); font-size: var(--text-xs); font-weight: 400;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
margin-bottom: var(--space-3);
}
.checklist-item {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: 8px 0;
}
.checklist-item__icon {
width: 18px; height: 18px; border-radius: var(--radius-full); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.checklist-item__icon--required {
background: rgba(94, 234, 212, 0.12); border: 1px solid var(--accent-ring);
}
.checklist-item__icon--likely {
background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25);
}
.checklist-item__text {
font-family: var(--sans); font-size: var(--text-sm); color: var(--text-secondary);
line-height: 1.5;
}
.checklist-item__text strong {
font-weight: 400; color: var(--text-primary);
}
.checklist-item__confidence {
font-family: var(--mono); font-size: 10px; color: var(--text-tertiary);
margin-left: auto; flex-shrink: 0; padding-top: 2px;
}
/* Contextual insights */
.insights-section { margin-bottom: var(--space-6); }
.insight-item {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: 10px var(--space-3);
margin: 0 calc(-1 * var(--space-3));
border-radius: var(--radius-sm);
transition: background 0.15s;
cursor: default;
}
.insight-item:hover { background: var(--glass); }
.insight-item__icon {
font-size: 13px; flex-shrink: 0; margin-top: 2px;
color: var(--text-tertiary);
}
.insight-item__text {
font-family: var(--sans); font-size: var(--text-sm); font-weight: 300;
color: var(--text-secondary); line-height: 1.55;
}
.insight-item__text em {
font-style: normal; font-family: var(--mono); color: var(--text-primary);
font-size: var(--text-xs);
}
/* Follow-up questions */
.followup-section { margin-bottom: var(--space-6); }
.followup-item {
display: flex; align-items: center; gap: var(--space-3);
padding: 10px var(--space-4);
margin: 0 calc(-1 * var(--space-4));
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
margin-bottom: var(--space-2);
cursor: pointer;
transition: border-color 0.2s, background 0.15s;
}
.followup-item:hover {
border-color: var(--accent-ring); background: var(--accent-glow);
}
.followup-item__text {
font-family: var(--sans); font-size: var(--text-sm); font-weight: 300;
color: var(--text-secondary); flex: 1;
transition: color 0.2s;
}
.followup-item:hover .followup-item__text { color: var(--text-primary); }
.followup-item__arrow {
font-family: var(--mono); font-size: 12px; color: var(--text-tertiary);
opacity: 0; transition: opacity 0.2s, color 0.2s;
}
.followup-item:hover .followup-item__arrow { opacity: 1; color: var(--accent); }
/* Action row */
.action-row {
display: flex; gap: var(--space-3);
padding: var(--space-2) 0 var(--space-6);
}
/* Disclaimer */
.disclaimer {
font-family: var(--sans); font-size: 11px; color: var(--text-ghost);
text-align: center; padding: var(--space-4) 0;
line-height: 1.5;
}
/* Did you know */
.dyk {
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
}
.dyk__header {
display: flex; align-items: center; gap: var(--space-2);
margin-bottom: var(--space-3);
}
.dyk__icon {
color: var(--accent); font-size: 10px;
}
.dyk__title {
font-family: var(--sans); font-size: var(--text-base); font-weight: 400;
color: var(--text-primary);
}
.dyk__body {
font-family: var(--sans); font-size: var(--text-sm); font-weight: 300;
color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-3);
}
.dyk__body p { margin-bottom: var(--space-2); }
.dyk__body strong { font-weight: 400; color: var(--text-primary); }
.dyk__reasons {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
.dyk__reason {
padding: var(--space-3);
background: var(--obsidian-mid);
border-radius: var(--radius-sm);
border: 1px solid var(--glass-border);
transition: border-color 0.2s;
}
.dyk__reason:hover { border-color: var(--glass-hover); }
.dyk__reason-label {
display: block;
font-family: var(--mono); font-size: var(--text-xs); font-weight: 400;
color: var(--accent); margin-bottom: 4px;
}
.dyk__reason-text {
font-family: var(--sans); font-size: var(--text-xs); font-weight: 300;
color: var(--text-secondary); line-height: 1.45;
}
.dyk__reason-text em {
font-style: normal; font-family: var(--mono); color: var(--text-primary);
}
/* Compare panel */
/* Inline compare row */
.compare-row {
display: flex; align-items: stretch; gap: 1px;
background: var(--glass-border); border-radius: var(--radius-sm);
overflow: hidden; margin-bottom: var(--space-4);
}
.compare-cell {
flex: 1; background: var(--obsidian-light);
padding: var(--space-3) var(--space-4);
display: flex; flex-direction: column; gap: 2px;
}
.compare-cell--you { background: rgba(52, 211, 153, 0.04); }
.compare-cell__badge {
font-family: var(--mono); font-size: 9px; font-weight: 400;
color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 2px;
}
.compare-cell--you .compare-cell__badge { color: var(--signal-green); }
.compare-cell__line {
display: flex; align-items: baseline; justify-content: space-between;
}
.compare-cell__val {
font-family: var(--mono); font-size: var(--text-xs); font-weight: 300;
color: var(--text-primary);
}
.compare-cell__lbl {
font-family: var(--sans); font-size: 10px; color: var(--text-tertiary);
}
.compare-savings {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(94, 234, 212, 0.04);
border: 1px solid rgba(94, 234, 212, 0.12);
border-radius: var(--radius-sm); margin-bottom: var(--space-6);
}
.compare-savings__icon {
color: var(--accent); font-size: 12px; flex-shrink: 0; margin-top: 2px;
}
.compare-savings__text {
font-family: var(--sans); font-size: var(--text-sm); font-weight: 300;
color: var(--text-secondary); line-height: 1.55;
}
.compare-savings__text strong {
color: var(--accent); font-weight: 400;
}
@media (max-width: 768px) {
.detail-grid { grid-template-columns: 1fr; }
.compare-row { flex-direction: column; }
.dyk__reasons { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav class="nav-float">
<a href="#" class="nav-float__wordmark">sfpermits.ai</a>
<div class="nav-float__links">
<a href="#" class="nav-float__link">Methodology</a>
<div class="nav-float__avatar">TB</div>
</div>
</nav>
<div class="page-body">
<div class="obs-container">
<!-- USER QUERY -->
<div class="query-section reveal">
<div class="query-text">I need to replace my water heater at 487 Noe St. It's a like-for-like swap, same location, gas to gas. What do I need?</div>
<div class="query-property">
<span class="query-property__check">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="query-property__addr">487 Noe St · Residential · Noe Valley</span>
</div>
</div>
<!-- AI RESPONSE -->
<div class="reveal reveal-delay-1">
<div class="ai-label">
<span class="ai-label__sparkle">✨</span>
<span>AI Analysis</span>
<span class="ai-label__date">· Based on public records as of Feb 27, 2026</span>
</div>
<div class="response-card">
<!-- LEAD WITH THE ANSWER -->
<p class="response-headline status-text--green">You can get this permit today.</p>
<p class="response-summary">
Same-day, walk-in approval. <strong>$150–$300</strong> · <strong>1 permit</strong> · <strong>1 inspection</strong>. No plan review, no waiting.
</p>
<!-- Routing badge — secondary, for people who know the system -->
<div class="review-path review-path--otc">
<div class="review-path__badge">
<span class="review-path__label">Over-the-counter eligible</span>
<span class="review-path__why">Like-for-like swap, same location, same fuel</span>
</div>
</div>
<!-- DID YOU KNOW — tight -->
<div class="dyk">
<div class="dyk__header">
<span class="dyk__icon">◆</span>
<span class="dyk__title">Most people skip this permit. Here's why that's expensive.</span>
</div>
<div class="dyk__reasons">
<div class="dyk__reason">
<span class="dyk__reason-label">Home sale</span>
<span class="dyk__reason-text">Buyer inspection flags it. Retroactive permit delays close <em>2–4 months</em>.</span>
</div>
<div class="dyk__reason">
<span class="dyk__reason-label">Insurance</span>
<span class="dyk__reason-text">Unpermitted gas work can void your coverage.</span>
</div>
<div class="dyk__reason">
<span class="dyk__reason-label">Safety</span>
<span class="dyk__reason-text">Inspection catches CO risks and bad venting.</span>
</div>
<div class="dyk__reason">
<span class="dyk__reason-label">Fix later</span>
<span class="dyk__reason-text">Now: <em>$150–$300</em>. Retroactive: <em>$800–$2,000</em>.</span>
</div>
</div>
</div>
<hr class="divider" style="margin-bottom: var(--space-5);">
<!-- WHAT TO DO — collapsed to essentials -->
<div class="permit-checklist">
<div class="permit-checklist__title">Next steps</div>
<div class="checklist-item">
<span class="checklist-item__icon checklist-item__icon--required">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#5eead4" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="checklist-item__text">File plumbing permit at <strong>49 South Van Ness, 2nd floor</strong>. Tues/Wed before 10am is fastest.</span>
</div>
<div class="checklist-item">
<span class="checklist-item__icon checklist-item__icon--required">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#5eead4" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="checklist-item__text">Bring water heater specs + contractor license. Clerk verifies capacity match.</span>
</div>
<div class="checklist-item">
<span class="checklist-item__icon checklist-item__icon--required">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#5eead4" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="checklist-item__text">Schedule 1 inspection after install — DBI portal or <strong>(628) 652-3700</strong>.</span>
</div>
</div>
<hr class="divider" style="margin-bottom: var(--space-5);">
<!-- WATCH OUT — what bumps you to in-house -->
<div class="insights-section">
<div class="permit-checklist__title">Changes that would add months</div>
<div class="insight-item">
<span class="insight-item__icon" style="color: var(--signal-amber);">⚠</span>
<span class="insight-item__text">Switch to electric heat pump → <em>+4–7 months</em></span>
</div>
<div class="insight-item">
<span class="insight-item__icon" style="color: var(--signal-amber);">⚠</span>
<span class="insight-item__text">Move unit to different room → <em>+4–7 months</em></span>
</div>
<div class="insight-item">
<span class="insight-item__icon" style="color: var(--signal-amber);">⚠</span>
<span class="insight-item__text">Upsize from 40 to 75 gal → <em>+4–7 months</em></span>
</div>
</div>
</div><!-- /response-card -->
</div>
<!-- FOLLOW-UP QUESTIONS -->
<section class="followup-section reveal reveal-delay-2">
<div class="section-label">Refine your question</div>
<div class="followup-item">
<span class="followup-item__text">What if I want to switch to a heat pump water heater instead?</span>
<span class="followup-item__arrow">→</span>
</div>
<div class="followup-item">
<span class="followup-item__text">Who are the top plumbers for water heater installs in Noe Valley?</span>
<span class="followup-item__arrow">→</span>
</div>
<div class="followup-item">
<span class="followup-item__text">Can my general contractor pull this permit, or does it need a licensed plumber?</span>
<span class="followup-item__arrow">→</span>
</div>
</section>
<!-- ACTIONS -->
<div class="action-row reveal reveal-delay-2">
<button class="action-btn">Save to portfolio</button>
<button class="action-btn">Share this analysis</button>
</div>
<!-- DISCLAIMER -->
<div class="disclaimer reveal">
AI-generated from public records. Not legal or professional advice. Consult a licensed architect or permit consultant for your specific project.
</div>
<!-- FRESHNESS -->
<div class="freshness reveal">
<span class="freshness-dot"></span>
Data as of Feb 27, 2026 · Updated nightly
</div>
</div>
</div>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>
</body>
</html>
