/* Security - Enterprise Domain Security Intelligence Platform */
/* Design: Linear (precision dark-shell) + Sentry (operational dashboard) */
/* Award-grade: every pixel intentional, zero slop */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
 /* === BACKGROUND SURFACES === */
 --bg-deep: #08090a;
 --bg: #0d0e0f;
 --surface: rgba(255,255,255,0.02);
 --surface-hover: rgba(255,255,255,0.04);
 --surface-elevated: rgba(255,255,255,0.05);
 --surface-card: rgba(255,255,255,0.03);
 
 /* === BORDERS === */
 --border: rgba(255,255,255,0.06);
 --border-subtle: rgba(255,255,255,0.04);
 --border-strong: rgba(255,255,255,0.1);
 --border-card: rgba(255,255,255,0.08);
 
 /* === TEXT HIERARCHY === */
 --text: #f0f1f2;
 --text-secondary: #d0d2d6;
 --text-muted: #8a8f98;
 --text-quiet: #62666d;
 
 /* === BRAND ACCENT === */
 --brand: #2563eb;
 --brand-hover: #3b82f6;
 --brand-glow: rgba(37,99,235,0.15);
 --brand-bg: rgba(37,99,235,0.12);
 
 /* === STATUS COLORS === */
 --green: #27a644;
 --green-soft: #4ade80;
 --green-bg: rgba(39,166,68,0.1);
 --green-border: rgba(39,166,68,0.2);
 
 --red: #f87171;
 --red-bg: rgba(248,113,113,0.1);
 --red-border: rgba(248,113,113,0.2);
 
 --amber: #fbbf24;
 --amber-bg: rgba(251,191,36,0.1);
 --amber-border: rgba(251,191,36,0.2);
 
 --cyan: #3b82f6;
 --cyan-bg: rgba(37,99,235,0.08);
 
 /* === SPACING === */
 --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 32px;
 --2xl: 48px; --3xl: 64px;
 
 /* === RADIUS === */
 --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 9999px;
 
 /* === FONTS === */
 --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 --mono: 'JetBrains Mono', ui-monospace, SF Mono, Menlo, monospace;
 
 /* === EASING === */
 --ease: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

html { font-size: 16px; }

body {
 font-family: var(--font);
 background: var(--bg);
 color: var(--text);
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

a {
 color: var(--brand-hover);
 text-decoration-color: rgba(59,130,246,0.38);
 text-underline-offset: 3px;
 transition: color var(--ease), text-decoration-color var(--ease), background var(--ease), border-color var(--ease);
}
a:hover {
 color: #bfdbfe;
 text-decoration-color: rgba(191,219,254,0.75);
}


/* Global bold tracking polish */
strong, b, .logo-text, .site-nav a, .header-badge, .btn-primary, .btn-link, .footer-product, .footer-brains, .footer-links a, .card-title, .result-title, .metric-label, .scan-chip, .report-section-title {
 letter-spacing: 0.012em;
}

/* === BACKGROUND LAYER === */
.bg-layer {
 position: fixed; inset: 0; z-index: 0; pointer-events: none;
 background:
 radial-gradient(ellipse 50% 40% at 20% 20%, rgba(37,99,235,0.04), transparent 65%),
 radial-gradient(ellipse 60% 50% at 80% 80%, rgba(37,99,235,0.02), transparent 60%),
 radial-gradient(ellipse 80% 60% at 50% 50%, rgba(8,9,10,0.9), transparent 80%),
 var(--bg);
}

/* === HEADER === */
header {
 position: sticky; top: 0; z-index: 100;
 background: rgba(8,9,10,0.85);
 backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--border);
 padding: var(--sm) var(--xl);
}

.header-inner {
 max-width: 1200px; margin: 0 auto;
 display: flex; align-items: center; justify-content: space-between;
}

.logo {
 display: inline-flex; align-items: center; gap: var(--sm);
 font-size: 0.94rem; font-weight: 700; color: var(--text);
 letter-spacing: 0.012em; text-decoration: none;
}

.logo-icon-img {
 width: 28px; height: 28px; object-fit: contain;
}
.logo-icon { color: var(--brand); width: 20px; height: 20px; }
.header-right { display: flex; align-items: center; gap: var(--sm); }
.site-nav {
 display: flex; align-items: center; gap: 6px;
 padding: 4px;
 border: 1px solid var(--border);
 border-radius: var(--r-pill);
 background: rgba(255,255,255,0.025);
}
.site-nav a {
 color: var(--text-muted);
 text-decoration: none;
 font-size: 0.75rem;
 font-weight: 700;
 padding: 6px 10px;
 border-radius: var(--r-pill);
}
.site-nav a:hover {
 color: var(--text);
 background: var(--surface-hover);
}

.header-badge {
 background: var(--brand-bg); color: var(--brand);
 padding: 3px var(--sm); border-radius: var(--r-pill);
 font-size: 0.65rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
}

/* === MAIN === */
main {
 flex: 1; max-width: 1200px; width: 100%; margin: 0 auto;
 padding: var(--2xl) var(--lg) var(--3xl);
 position: relative; z-index: 1;
}

/* === SEARCH === */
.search-section { text-align: center; margin-bottom: var(--sm); }
.search-form { max-width: 600px; margin: 0 auto var(--sm); }

.input-wrapper {
 display: flex; align-items: center;
 background: var(--surface);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-md);
 overflow: hidden;
 transition: border-color var(--ease), box-shadow var(--ease);
}

.input-wrapper:focus-within {
 border-color: var(--brand);
 box-shadow: 0 0 0 3px var(--brand-glow), 0 4px 16px rgba(0,0,0,0.4);
}

.search-icon {
 padding: 0 var(--sm) 0 var(--md); color: var(--text-muted);
 flex-shrink: 0; display: flex; align-items: center;
}
.input-wrapper:focus-within .search-icon { color: var(--brand); }

#urlInput {
 flex: 1; background: transparent; border: none; outline: none;
 color: var(--text); font-size: 0.94rem; font-family: var(--font);
 padding: 0.875rem var(--sm) 0.875rem 0;
}
#urlInput::placeholder { color: var(--text-muted); }

.btn-primary {
 background: var(--brand); color: #fff; border: none;
 padding: 0.875rem var(--lg); font-size: 0.88rem; font-weight: 600;
 font-family: var(--font); cursor: pointer; transition: all var(--ease);
 white-space: nowrap; letter-spacing: 0.012em;
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.search-note {
 color: var(--text-muted); font-size: 0.75rem; font-weight: 400;
 margin-top: var(--sm);
}

.search-explain {
 color: var(--text-quiet); font-size: 0.73rem; font-weight: 400;
 margin-top: var(--sm); max-width: 500px; margin-left: auto; margin-right: auto;
 line-height: 1.5;
}

/* === LOADING === */
.loading-state { text-align: center; padding: var(--3xl) var(--sm); }
.loading-state:not(.hidden) { display: block; }

.loading-spinner {
 width: 40px; height: 40px; margin: 0 auto var(--md);
 border: 3px solid var(--border); border-top-color: var(--brand);
 border-radius: 50%; animation: spin 0.8s linear infinite;
}

.loading-text {
 color: var(--text-secondary); font-size: 0.94rem; font-weight: 500;
 margin-bottom: var(--sm);
}

.loading-steps {
 color: var(--text-muted); font-size: 0.81rem; font-family: var(--mono);
 min-height: 1.5em;
}

/* === ERROR STATE === */
.error-state { text-align: center; padding: var(--3xl) var(--sm); }
.error-state:not(.hidden) { display: block; }

.error-icon {
 font-size: 2rem; color: var(--red); margin-bottom: var(--md);
 font-weight: 700;
}
.error-title {
 font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: var(--sm);
}
.error-message {
 color: var(--text-muted); font-size: 0.88rem; max-width: 400px; margin: 0 auto;
 line-height: 1.5;
}

/* === EMPTY STATE === */
.empty-state { text-align: center; padding: var(--3xl) var(--sm); }
.empty-state:not(.hidden) { display: block; }

.shield-icon {
 margin: 0 auto var(--xl);
 display: flex; justify-content: center;
}
.empty-shield-img {
 width: 80px; height: 80px; object-fit: contain;
}
.logo-icon { color: var(--brand); width: 20px; height: 20px; }

.ai-hero-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto var(--sm);
 padding: 6px 12px;
 border: 1px solid rgba(37,99,235,0.32);
 border-radius: var(--r-pill);
 background: rgba(37,99,235,0.12);
 color: #dbeafe;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.empty-title {
 font-size: 2.75rem; font-weight: 800; letter-spacing: 0.006em;
 margin-bottom: var(--sm);
 background: linear-gradient(135deg, var(--text) 30%, var(--brand) 100%);
 -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 background-clip: text;
}

.empty-subtitle {
 color: var(--text-muted); font-size: 0.94rem; font-weight: 400;
 margin-bottom: var(--2xl); max-width: 480px; margin-left: auto; margin-right: auto;
 line-height: 1.6;
}

/* === FEATURE GRID === */
.feature-grid {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 gap: var(--sm); margin-bottom: var(--2xl);
}

.feature-card {
 background: var(--surface); border: 1px solid var(--border);
 border-radius: var(--r-md); padding: var(--sm) var(--md);
 display: flex; flex-direction: column; align-items: center;
 gap: var(--xs); transition: all var(--ease);
}
.feature-card:hover {
 border-color: var(--border-strong);
 background: var(--surface-hover);
 box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.feature-card-icon {
 font-size: 0.69rem; font-weight: 700; font-family: var(--mono);
 color: var(--brand); letter-spacing: 0.5px;
}
.feature-card-label {
 font-size: 0.75rem; font-weight: 500; color: var(--text-secondary);
}
.feature-card-accent {
 border-color: var(--brand-glow);
 background: linear-gradient(135deg, var(--surface) 0%, rgba(37,99,235,0.06) 100%);
}

/* === AUDIENCE SECTION === */
.audience-section {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: var(--sm); max-width: 700px; margin: 0 auto var(--2xl);
}
.audience-card {
 background: var(--surface); border: 1px solid var(--border);
 border-radius: var(--r-md); padding: var(--md) var(--lg);
 text-align: left;
}
.audience-card h4 {
 font-size: 0.84rem; font-weight: 600; color: var(--text); margin-bottom: 4px;
}
.audience-card p {
 font-size: 0.75rem; color: var(--text-muted); line-height: 1.45;
}

/* === EXAMPLE LINKS === */
.example-links {
 display: flex; align-items: center; justify-content: center;
 gap: var(--sm); flex-wrap: wrap;
}
.example-links span { color: var(--text-quiet); font-size: 0.81rem; font-weight: 500; }

.example-btn {
 background: var(--surface); border: 1px solid var(--border);
 color: var(--text-secondary); padding: 5px var(--md);
 border-radius: var(--r-pill); font-size: 0.81rem; font-weight: 500;
 font-family: var(--font); cursor: pointer; transition: all var(--ease);
}
.example-btn:hover {
 background: var(--brand); color: #fff; border-color: var(--brand);
}

/* === RESULTS === */
.results { display: none; flex-direction: column; gap: var(--md); }
.results:not(.hidden) { display: flex; }

.results-header {
 display: flex; align-items: flex-start; justify-content: space-between;
 margin-bottom: var(--sm); flex-wrap: wrap; gap: var(--sm);
}

.results-header h2 {
 font-size: 1.75rem; font-weight: 800; letter-spacing: 0.006em;
 color: var(--text);
}

.result-time {
 display: block; font-size: 0.75rem; color: var(--text-quiet); margin-top: 2px;
}

/* === ANCHOR NAV === */
.anchor-nav {
 display: flex; gap: var(--xs); flex-wrap: wrap; padding: var(--sm) var(--lg);
 background: var(--surface); border: 1px solid var(--border);
 border-radius: var(--r-md); margin-bottom: var(--md);
}
.anchor-nav:not(.hidden) { display: flex; }

.anchor-link {
 padding: 4px var(--sm); border-radius: var(--r-sm);
 font-size: 0.75rem; font-weight: 500; color: var(--text-muted);
 text-decoration: none; transition: all var(--ease);
 cursor: pointer;
}
.anchor-link:hover {
 background: var(--surface-hover); color: var(--text);
}

/* === CARDS === */
.card {
 background: var(--surface-card);
 border: 1px solid var(--border-card);
 border-radius: var(--r-lg);
 overflow: hidden;
 transition: border-color var(--ease), box-shadow var(--ease);
 margin-bottom: var(--lg);
}
.card:hover {
 border-color: var(--border-strong);
 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.card:last-child { margin-bottom: 0; }

.card-header {
 display: flex; align-items: center; gap: var(--sm);
 padding: var(--sm) var(--lg); border-bottom: 1px solid var(--border);
}

.card-icon { color: var(--text-muted); flex-shrink: 0; width: 16px; height: 16px; }

.card-title {
 font-size: 0.68rem; font-weight: 600; color: var(--text-secondary);
 letter-spacing: 0.4px; text-transform: uppercase; flex: 1;
}

.card-badge {
 font-size: 0.62rem; font-weight: 600;
 padding: 3px var(--sm); border-radius: var(--r-pill);
 font-family: var(--font); letter-spacing: 0.2px; text-transform: uppercase;
}
.card-badge.pass { background: var(--green-bg); color: var(--green-soft); border: 1px solid var(--green-border); }
.card-badge.fail { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.card-badge.warn { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.card-badge.info { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); }

.card-body { padding: 0; }

/* === CHECK ITEMS === */
.check-item {
 display: flex; align-items: center; gap: var(--md);
 min-height: 76px;
 padding: 0.69rem var(--lg);
 border-bottom: 1px solid var(--border-subtle);
 transition: background var(--ease);
}
.check-item:last-child { border-bottom: none; }
.check-item:hover { background: rgba(255,255,255,0.01); }

.check-icon {
 width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
 border-radius: 50%; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; margin-top: 1px;
 font-family: var(--mono);
}
.check-icon.pass { background: var(--green-bg); color: var(--green-soft); border: 1px solid var(--green-border); }
.check-icon.fail { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.check-icon.warn { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.check-icon.info { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); }

.check-label {
 flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 400; color: var(--text);
}
.check-label .critical { color: var(--red); font-weight: 600; }

.check-detail {
 font-size: 0.72rem; font-weight: 400; color: var(--text-muted);
 font-family: var(--mono);
 text-align: right; max-width: 220px; overflow: hidden;
 text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0;
 word-break: break-word;
}

/* === SCORE CARD === */
.score-card { border-color: var(--brand-glow); }
.score-card .card-body { padding: var(--lg) var(--2xl); }

.score-grid {
 display: flex; align-items: center; gap: var(--2xl); flex: 1;
}

.score-ring {
 width: 140px; height: 140px; position: relative; flex-shrink: 0;
}
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle.score-track { stroke: var(--border); }
.score-ring circle.score-fill {
 stroke-width: 8; stroke-linecap: round;
 transition: stroke-dashoffset 0.8s ease, stroke var(--ease);
}
.score-ring circle.score-glow {
 stroke-width: 8; stroke-linecap: round; opacity: 0.2;
 filter: blur(6px);
 transition: stroke-dashoffset 0.8s ease, stroke var(--ease);
}
.score-center {
 position: absolute; inset: 0; display: flex; flex-direction: column;
 align-items: center; justify-content: center;
}
.score-number {
 font-size: 2.5rem; font-weight: 800; line-height: 1;
 font-family: var(--font); letter-spacing: 0.004em;
}
.score-label {
 font-size: 0.65rem; font-weight: 600; color: var(--text-muted);
 text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px;
}

.score-info { flex: 1; min-width: 0; }
.score-info h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.006em; margin-bottom: 4px; }
.score-info p { font-size: 0.81rem; color: var(--text-muted); line-height: 1.5; margin-bottom: var(--md); }

.score-tags { display: flex; flex-wrap: wrap; gap: var(--xs); }
.score-tag {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 4px var(--sm); border-radius: var(--r-pill);
 font-size: 0.69rem; font-weight: 600; font-family: var(--font);
 border: 1px solid;
}
.score-tag.critical { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.score-tag.warning { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.score-tag.pass { background: var(--green-bg); color: var(--green-soft); border-color: var(--green-border); }

/* === SUB-SCORES === */
.sub-scores-container {
 display: flex; flex-wrap: wrap; gap: var(--xs); margin-top: var(--sm);
}
.sub-score-item {
 display: flex; justify-content: space-between; gap: var(--sm);
 padding: 4px var(--sm); background: var(--surface);
 border-radius: var(--r-sm); font-size: 0.72rem;
}
.sub-score-label { color: var(--text-muted); font-weight: 500; }
.sub-score-value { font-weight: 600; font-family: var(--mono); }

/* === CONTACT CARDS === */
.contact-item {
 display: flex; align-items: center; gap: var(--md);
 padding: 0.75rem var(--lg);
 border-bottom: 1px solid var(--border-subtle);
}
.contact-item:last-child { border-bottom: none; }

.contact-icon {
 width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
 border-radius: var(--r-sm); font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
 background: var(--red-bg); color: var(--red);
 border: 1px solid var(--red-border);
}

.contact-info { flex: 1; min-width: 0; }
.contact-email { font-size: 0.88rem; font-weight: 500; color: var(--text); font-family: var(--mono); word-break: break-all; }
.contact-source { font-size: 0.69rem; color: var(--text-muted); margin-top: 2px; }

.contact-badge {
 padding: 3px var(--sm); border-radius: var(--r-pill);
 font-size: 0.62rem; font-weight: 600; background: var(--red-bg);
 color: var(--red); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
 border: 1px solid var(--red-border);
}

/* === DNS RECORDS === */
.dns-type-group {
 padding: var(--sm) var(--lg) var(--md);
 border-bottom: 1px solid var(--border-subtle);
}
.dns-type-group:last-child { border-bottom: none; }

.dns-type-label {
 font-size: 0.65rem; font-weight: 600; font-family: var(--font);
 text-transform: uppercase; letter-spacing: 0.5px;
 color: var(--brand); margin-bottom: var(--sm);
}

.dns-items { display: flex; flex-wrap: wrap; gap: var(--xs); }

.dns-item {
 padding: 4px var(--sm); background: rgba(0,0,0,0.25);
 border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
 font-size: 0.72rem; font-weight: 400; font-family: var(--mono);
 color: var(--text-muted); word-break: break-word; line-height: 1.35;
 max-width: 100%; min-width: 80px; transition: border-color var(--ease);
}
.dns-item:hover { border-color: var(--border-strong); }

/* === REMEDIATION === */
.remediation-item {
 display: flex; gap: var(--sm);
 padding: 0.75rem var(--lg);
 border-bottom: 1px solid var(--border-subtle);
}
.remediation-item:last-child { border-bottom: none; }

.remediation-num {
 width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
 border-radius: 50%; background: var(--red-bg); color: var(--red);
 font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
 border: 1px solid var(--red-border);
}
.remediation-text {
 flex: 1; min-width: 0; font-size: 0.81rem; color: var(--text-secondary);
 line-height: 1.6; word-break: break-word;
}
.remediation-text strong { color: var(--text); font-weight: 600; }
.remediation-risk { color: var(--text-muted); display: block; margin-top: 2px; font-size: 0.78rem; }
.remediation-fix { color: #67e8f9; display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.75rem; }
.remediation-meta { color: var(--text-quiet); display: block; margin-top: 2px; font-size: 0.72rem; }

/* === PDF BUTTON === */
.btn-pdf {
 background: var(--surface); color: var(--text-secondary);
 border: 1px solid var(--border); padding: 7px var(--md);
 font-size: 0.78rem; font-weight: 600; font-family: var(--font);
 cursor: pointer; border-radius: var(--r-sm); transition: all var(--ease);
 display: inline-flex; align-items: center; gap: var(--xs);
}
.btn-pdf:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* === SHAREABLE REPORT / FOOTER LINK POLISH === */
.share-report-card {
 margin-bottom: var(--2xl);
}
.ai-summary-card {
 border-color: rgba(37,99,235,0.2);
 background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(255,255,255,0.02));
}
.ai-action-card {
 border-color: rgba(37,99,235,0.22);
 background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(255,255,255,0.018));
}
.ai-action-card .card-body { padding: var(--lg) var(--xl); }
.ai-action-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr); gap: var(--lg); }
.ai-action-grid h3 { font-size: 0.95rem; margin-bottom: var(--sm); letter-spacing: 0.006em; }
.ai-action-grid p, .ai-action-grid li { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.55; }
.ai-action-grid ol { padding-left: 1.2rem; display: grid; gap: 6px; }
.ai-plan-item { display: flex; gap: var(--sm); padding: var(--sm) 0; border-bottom: 1px solid var(--border-subtle); }
.ai-plan-item:last-child { border-bottom: none; }
.ai-plan-item h4 { font-size: 0.88rem; margin-bottom: 4px; }
.ai-plan-item p { margin-bottom: var(--xs); }
.handoff-box { margin-top: var(--md); border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(0,0,0,0.18); padding: var(--md); }
.handoff-box strong { display: block; margin-bottom: var(--sm); color: var(--text); }
.handoff-box pre { white-space: pre-wrap; color: var(--text-secondary); font-family: var(--mono); font-size: 0.72rem; line-height: 1.45; }
.ai-summary-card .card-body {
 padding: var(--lg) var(--xl);
}
.ai-summary-card p {
 color: var(--text-secondary);
 font-size: 0.94rem;
 line-height: 1.65;
 margin: 0;
}
.ai-summary-meta {
 margin-top: var(--sm);
 color: var(--text-quiet);
 font-family: var(--mono);
 font-size: 0.69rem;
}
.share-report-card .card-body {
 padding: var(--lg) var(--xl);
 display: flex;
 flex-direction: column;
 gap: var(--md);
}
.share-report-card p {
 color: var(--text-secondary);
 font-size: 0.94rem;
 line-height: 1.55;
}
.btn-link {
 display: inline-flex;
 align-items: center;
 width: fit-content;
 color: #dbeafe;
 text-decoration: none;
 font-weight: 700;
 font-size: 0.84rem;
 letter-spacing: 0.012em;
 padding: 8px 12px;
 border-radius: var(--r-pill);
 background: rgba(37,99,235,0.12);
 border: 1px solid rgba(37,99,235,0.28);
 box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.btn-link:hover {
 color: #fff;
 background: var(--brand);
 border-color: var(--brand);
}

/* === FOOTER === */
footer {
 text-align: center; padding: 52px var(--xl);
 color: var(--text-quiet); font-size: 0.75rem; font-weight: 400;
 border-top: 1px solid var(--border); margin-top: auto;
 position: relative; z-index: 1; background: rgba(3, 7, 18, 0.42);
}
.footer-shell {
 max-width: 1200px; margin: 0 auto;
 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.footer-brand-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.footer-brand-line { display: flex; align-items: baseline; justify-content: center; gap: 7px; flex-wrap: wrap; margin: 0; }
.footer-product {
 color: #fff !important; font-weight: 800; letter-spacing: 0.035em; font-size: 0.92rem; text-decoration: none; padding: 0;
}
.footer-brand-muted { color: var(--text-secondary); font-size: 0.76rem; letter-spacing: 0.03em; }
.footer-brains { color: #fff !important; font-weight: 800; text-decoration: none; padding: 0; letter-spacing: 0.02em; }
.footer-brains:hover, .footer-product:hover { background: transparent; color: #dbeafe !important; }
.footer-copy { color: var(--text-quiet); opacity: 0.74; margin: 0; text-align: center; }
.footer-links { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 36px); flex-wrap: wrap; }
.footer-links a { color: #c7d2fe; text-decoration: none; font-weight: 600; padding: 2px 0; border-radius: 0; }
.footer-links a:hover { background: transparent; color: #fff; }
.footer-note { margin-top: 4px; color: var(--text-quiet); opacity: 0.6; }

/* === PREMIUM LEGAL PAGES === */
.legal-page main {
 max-width: 1180px;
 padding-top: var(--2xl);
}
.legal-hero {
 position: relative;
 overflow: hidden;
 border: 1px solid var(--border-card);
 border-radius: 28px;
 padding: clamp(32px, 6vw, 72px);
 margin-bottom: var(--xl);
 background:
  radial-gradient(circle at 18% 10%, rgba(37,99,235,0.18), transparent 36%),
  radial-gradient(circle at 90% 20%, rgba(29,78,216,0.14), transparent 34%),
  linear-gradient(135deg, rgba(37,99,235,0.09), rgba(255,255,255,0.02));
 box-shadow: 0 28px 80px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.legal-hero::before {
 content: '';
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent 42%);
}
.legal-hero > * { position: relative; z-index: 1; }
.legal-kicker {
 display: inline-flex;
 color: var(--brand-hover);
 font-size: 0.72rem;
 font-weight: 900;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 margin-bottom: var(--md);
}
.legal-hero h1 {
 max-width: 820px;
 margin: 0 0 var(--md);
 font-size: clamp(2.2rem, 6vw, 4.8rem);
 line-height: 0.95;
 letter-spacing: 0.004em;
}
.legal-hero p {
 max-width: 760px;
 color: var(--text-secondary);
 font-size: clamp(1rem, 2.5vw, 1.22rem);
 line-height: 1.65;
}
.legal-actions {
 display: flex;
 gap: var(--sm);
 flex-wrap: wrap;
 margin-top: var(--xl);
}
.btn-link-secondary {
 color: var(--text-secondary);
 background: rgba(255,255,255,0.04);
 border-color: var(--border-strong);
}
.btn-link-secondary:hover {
 color: var(--text);
 background: rgba(255,255,255,0.08);
 border-color: rgba(255,255,255,0.18);
}
.legal-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--md);
}
.legal-info-card {
 min-height: 220px;
 border: 1px solid var(--border-card);
 border-radius: 22px;
 padding: var(--xl);
 background:
  radial-gradient(circle at 18% 0%, rgba(37,99,235,0.08), transparent 38%),
  linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
 box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}
.legal-info-card span {
 display: inline-flex;
 color: var(--brand-hover);
 font-family: var(--mono);
 font-size: 0.76rem;
 font-weight: 800;
 margin-bottom: var(--lg);
}
.legal-info-card h2 {
 font-size: 1.25rem;
 line-height: 1.15;
 letter-spacing: 0.006em;
 margin-bottom: var(--sm);
}
.legal-info-card p {
 color: var(--text-muted);
 font-size: 0.95rem;
 line-height: 1.65;
}

/* === EDUCATION / LEARN PAGE === */
.guide-page main {
 max-width: 1180px;
}
.guide-hero {
 margin-bottom: var(--lg);
}
.guide-layout {
 display: grid;
 grid-template-columns: 220px minmax(0, 1fr);
 gap: var(--lg);
 align-items: start;
}
.guide-nav {
 position: sticky;
 top: 92px;
 display: grid;
 gap: 6px;
 padding: var(--sm);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 background: rgba(255,255,255,0.025);
}
.guide-nav a {
 color: var(--text-muted);
 text-decoration: none;
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.012em;
 padding: 8px 10px;
 border-radius: var(--r-sm);
}
.guide-nav a:hover,
.guide-nav a:focus {
 color: var(--text);
 background: rgba(37,99,235,0.14);
}
.guide-content {
 display: grid;
 gap: var(--lg);
}
.guide-section {
 position: relative;
 border: 1px solid var(--border-card);
 border-radius: 24px;
 padding: clamp(22px, 4vw, 36px);
 background:
  radial-gradient(circle at 12% 0%, rgba(37,99,235,0.12), transparent 34%),
  linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
 box-shadow: 0 18px 52px rgba(0,0,0,0.22);
 overflow: hidden;
}
.guide-number {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 28px;
 margin-bottom: var(--sm);
 border-radius: var(--r-pill);
 color: #dbeafe;
 background: rgba(37,99,235,0.16);
 border: 1px solid rgba(37,99,235,0.3);
 font-family: var(--mono);
 font-size: 0.72rem;
 font-weight: 800;
}
.guide-section h2 {
 margin: 0 0 var(--sm);
 font-size: clamp(1.55rem, 3vw, 2.35rem);
 line-height: 1.05;
 letter-spacing: 0.003em;
 color: var(--text);
}
.guide-section > p {
 max-width: 820px;
 margin: 0 0 var(--lg);
 color: var(--text-secondary);
 font-size: 1rem;
 line-height: 1.65;
}
.guide-check-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--md);
}
.guide-check-grid article,
.guide-callout {
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: var(--lg);
 background: rgba(0,0,0,0.18);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.guide-check-grid article h3 {
 margin: 0 0 var(--sm);
 font-size: 1.05rem;
 line-height: 1.2;
 color: #dbeafe;
 letter-spacing: 0.008em;
}
.guide-check-grid article p,
.guide-callout {
 color: var(--text-secondary);
 font-size: 0.88rem;
 line-height: 1.58;
}
.guide-check-grid article p + p {
 margin-top: 7px;
}
.guide-check-grid b,
.guide-callout strong {
 color: var(--text);
 font-weight: 800;
 letter-spacing: 0.012em;
}
.guide-check-grid code {
 color: #bfdbfe;
 background: rgba(37,99,235,0.12);
 border: 1px solid rgba(37,99,235,0.22);
 border-radius: 6px;
 padding: 1px 5px;
 font-family: var(--mono);
 font-size: 0.84em;
}

/* === ANIMATIONS === */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.results:not(.hidden) { animation: fadeIn 0.4s ease; }
.hidden { display: none !important; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
 main { padding: var(--xl) var(--md) var(--2xl); }
 header { padding: var(--sm) var(--md); }
 
 .empty-title { font-size: 2rem; letter-spacing: 0.006em; }
 .empty-subtitle { font-size: 0.88rem; }
 
 .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--xs); }
 .feature-card { padding: var(--xs) var(--sm); }
 .feature-card-icon { font-size: 0.62rem; }
 .feature-card-label { font-size: 0.69rem; }
 
 .audience-section { grid-template-columns: 1fr; }
 
 .score-grid { flex-direction: column; text-align: center; gap: var(--md); }
 .score-ring { width: 120px; height: 120px; }
 .score-number { font-size: 2rem; }
 .score-tags { justify-content: center; }
 .sub-scores-container { justify-content: center; }
 
 .check-item { gap: var(--sm); padding: 0.69rem var(--md); }
 .check-label { font-size: 0.84rem; flex: none; width: 100%; }
 .check-detail {
 text-align: left; max-width: 100%; white-space: normal;
 font-size: 0.69rem; margin-top: 2px; line-height: 1.3;
 }
 
 .contact-item { padding: 0.69rem var(--md); flex-wrap: wrap; }
 .contact-email { font-size: 0.81rem; }
 .contact-badge { margin-left: 58px; }
 
 .dns-item { font-size: 0.69rem; min-width: 60px; }
 
 .results-header { flex-direction: column; }
 .btn-pdf { align-self: flex-start; }
 .results-header h2 { font-size: 1.4rem; }
 
 .anchor-nav { gap: var(--xs); }
 .anchor-link { font-size: 0.7rem; padding: 3px var(--xs); }
 .site-nav { order: 3; width: 100%; justify-content: center; border-radius: var(--r-md); overflow-x: auto; }
 .header-inner { flex-wrap: wrap; gap: var(--sm); }
 .legal-grid { grid-template-columns: 1fr; }
 .legal-info-card { min-height: auto; padding: var(--lg); }
 .legal-hero { border-radius: 22px; }
 .legal-actions .btn-link { width: 100%; justify-content: center; }
 .ai-action-grid { grid-template-columns: 1fr; }
 .guide-layout { grid-template-columns: 1fr; }
 .guide-nav { position: static; display: flex; flex-wrap: wrap; }
 .guide-check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
 .empty-title { font-size: 1.5rem; }
 .logo-text { display: none; }
 .header-badge { font-size: 0.58rem; padding: 2px var(--xs); }
 .input-wrapper { border-radius: var(--r-sm); }
 .example-btn { padding: 4px var(--sm); font-size: 0.75rem; }
 .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === BOLD TYPE TRACKING POLISH ===
   The Inter bold weights were too compressed on mobile. Give every bold UI
   surface a little more breathing room without loosening normal body copy. */
.logo,
.site-nav a,
.btn-primary,
.btn-pdf,
.btn-link,
.example-btn,
footer a,
strong,
b,
.check-label .critical,
.remediation-text strong {
 letter-spacing: 0.012em;
}

.empty-title,
.results-header h2,
.error-title,
.score-number,
.score-info h3,
.audience-card h4,
.legal-hero h1,
.legal-info-card h2,
.footer-brand {
 letter-spacing: 0.006em;
}