/* SEO pages — shared dark theme CSS */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#0a0a0f;color:#a3a3b8;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:#7c6aef;text-decoration:none;transition:color .15s}
a:hover{color:#9b8af2}
code{font-family:'SF Mono',Monaco,Consolas,'Liberation Mono',monospace}
pre{font-family:'SF Mono',Monaco,Consolas,'Liberation Mono',monospace}

/* Layout */
.container{max-width:56rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
.content{max-width:48rem;margin:0 auto;padding:3rem 1rem}
@media(min-width:640px){.content{padding:3rem 1.5rem}}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.8);backdrop-filter:blur(16px);border-bottom:1px solid #1e1e2e}
header .inner{max-width:56rem;margin:0 auto;padding:0 1rem;height:4rem;display:flex;align-items:center;justify-content:space-between}
@media(min-width:640px){header .inner{padding:0 1.5rem}}
header a.logo{display:flex;align-items:center;gap:.75rem;color:#fff;font-size:1.25rem;font-weight:600;letter-spacing:-.025em}
.logo-icon{width:2rem;height:2rem;border-radius:.5rem;background:linear-gradient(135deg,#7c6aef,#a855f7);display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:1rem;height:1rem;color:#fff}
header a.back{color:#6b6b80;font-size:.875rem;transition:color .15s;display:flex;align-items:center;gap:.375rem}
header a.back:hover{color:#fff}
header nav{display:flex;align-items:center;gap:1rem}
header nav a{color:#6b6b80;font-size:.875rem;transition:color .15s}
header nav a:hover{color:#fff}

/* Typography */
h1{font-size:1.875rem;font-weight:700;color:#fff;margin-bottom:.5rem}
h2{font-size:1.5rem;font-weight:600;color:#fff;margin-bottom:.5rem}
h3{font-size:1.125rem;font-weight:600;color:#fff;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
h3 svg{width:1.25rem;height:1.25rem;color:#7c6aef;flex-shrink:0}
.subtitle{color:#6b6b80;font-size:.875rem;margin-bottom:2rem}
strong{color:#fff}

/* Sections */
section{margin-bottom:3rem}
.section-desc{color:#6b6b80;font-size:.875rem;margin-bottom:1.5rem}

/* Cards */
.card{background:rgba(10,10,15,.5);border:1px solid #1e1e2e;border-radius:.75rem;padding:1rem;margin-bottom:.75rem;transition:border-color .15s}
.card:hover{border-color:rgba(124,106,239,.4)}
.card-padded{background:rgba(10,10,15,.5);border:1px solid #1e1e2e;border-radius:.75rem;padding:1.25rem;margin-bottom:1rem}
.card-title{color:#fff;font-size:.875rem;font-weight:500}
.card-meta{color:#4a4a5e;font-size:.75rem;margin-top:.125rem}
.card-desc{color:#6b6b80;font-size:.75rem;margin-top:.5rem;line-height:1.6}

/* Digest / content block */
.digest{background:rgba(10,10,15,.6);border:1px solid #1e1e2e;border-radius:1rem;padding:1.5rem}
@media(min-width:640px){.digest{padding:2rem}}
.digest p{font-size:.875rem;line-height:1.75;margin-bottom:1rem;color:#a3a3b8}
.digest p:last-child{margin-bottom:0}

/* Score badge */
.score{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:50%;font-weight:700;font-size:1.125rem;flex-shrink:0;line-height:1;text-align:center}
.score-sm{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;font-size:.8125rem;border-radius:50%;font-weight:700;line-height:1;text-align:center;flex-shrink:0}
.score-green{background:rgba(34,197,94,.15);color:#22c55e;border:2px solid rgba(34,197,94,.3)}
.score-yellow{background:rgba(234,179,8,.15);color:#eab308;border:2px solid rgba(234,179,8,.3)}
.score-red{background:rgba(239,68,68,.15);color:#ef4444;border:2px solid rgba(239,68,68,.3)}
.score-gray{background:rgba(107,107,128,.15);color:#6b6b80;border:2px solid rgba(107,107,128,.3)}

/* Score bar */
.score-bar{height:.5rem;border-radius:.25rem;background:#1e1e2e;overflow:hidden;flex:1}
.score-bar-fill{height:100%;border-radius:.25rem;transition:width .3s}
.bar-green{background:#22c55e}
.bar-yellow{background:#eab308}
.bar-red{background:#ef4444}

/* Tabs */
.tabs{display:flex;gap:.25rem;overflow-x:auto;border-bottom:1px solid #1e1e2e;margin-bottom:2rem;padding-bottom:0}
.tab{display:inline-block;padding:.75rem 1rem;font-size:.875rem;color:#6b6b80;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.tab:hover{color:#a3a3b8}
.tab-active{color:#7c6aef;border-bottom-color:#7c6aef}

/* Grid */
.grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Pill / badge */
.pill{display:inline-block;font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;background:#1e1e2e;color:#6b6b80;border:1px solid #2a2a3e}
.pill-green{background:rgba(34,197,94,.1);color:#22c55e;border-color:rgba(34,197,94,.2)}
.pill-yellow{background:rgba(234,179,8,.1);color:#eab308;border-color:rgba(234,179,8,.2)}
.pill-red{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.2)}
.pill-blue{background:rgba(59,130,246,.1);color:#3b82f6;border-color:rgba(59,130,246,.2)}
.pill-purple{background:rgba(168,85,247,.1);color:#a855f7;border-color:rgba(168,85,247,.2)}

/* Method badge */
.method{font-size:.6875rem;font-family:'SF Mono',Monaco,Consolas,monospace;font-weight:700;padding:.25rem .5rem;border-radius:.25rem}
.method-get{background:rgba(34,197,94,.15);color:#22c55e}
.method-post{background:rgba(59,130,246,.15);color:#3b82f6}
.method-patch{background:rgba(234,179,8,.15);color:#eab308}
.method-delete{background:rgba(239,68,68,.15);color:#ef4444}

/* Table */
table{width:100%;font-size:.875rem;border-collapse:collapse}
thead{color:#6b6b80}
th{text-align:left;padding:.75rem 1rem;border-bottom:1px solid #2a2a3e;font-weight:500}
td{padding:.5rem 1rem;border-bottom:1px solid #1e1e2e;color:#a3a3b8}
td code{color:#eab308;font-size:.8125rem}

/* Pre / code blocks */
.code-block{background:#0d0d14;border:1px solid #1e1e2e;border-radius:.75rem;overflow:hidden}
.code-header{background:#15151f;padding:.5rem 1rem;font-size:.75rem;color:#4a4a5e;font-family:monospace;border-bottom:1px solid #1e1e2e}
.code-body{padding:1rem;font-size:.8125rem;color:#a3a3b8;font-family:'SF Mono',Monaco,Consolas,monospace;overflow-x:auto;white-space:pre-wrap}
code.inline{color:#7c6aef;background:#15151f;padding:.125rem .375rem;border-radius:.25rem;font-size:.8125rem}

/* Hero */
.hero{text-align:center;padding:4rem 0 2rem}
.hero h1{font-size:2.25rem;line-height:1.15;margin-bottom:1rem}
@media(min-width:640px){.hero h1{font-size:3rem}}
.hero p{color:#6b6b80;font-size:1.125rem;max-width:40rem;margin:0 auto;line-height:1.6}

/* Brand grid */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem;margin-top:2rem}
.brand-card{display:block;background:rgba(10,10,15,.5);border:1px solid #1e1e2e;border-radius:.75rem;padding:1.25rem;transition:border-color .15s}
.brand-card:hover{border-color:rgba(124,106,239,.4);color:inherit}
.brand-card h3{font-size:1rem;color:#fff;margin-bottom:.25rem;display:block}
.brand-card .domain{font-size:.75rem;color:#4a4a5e;margin-bottom:.75rem}
.brand-card .stats{display:flex;align-items:center;gap:1rem;font-size:.75rem;color:#6b6b80}
.brand-screenshot{margin:-1.25rem -1.25rem .75rem;overflow:hidden;border-radius:.75rem .75rem 0 0;height:10rem;position:relative}
.brand-screenshot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.brand-screenshot::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3rem;background:linear-gradient(transparent,rgba(10,10,15,.9));pointer-events:none}

/* Framework cards (from research) */
.fw-card{background:rgba(10,10,15,.5);border:1px solid #1e1e2e;border-radius:.75rem;padding:1.25rem;margin-bottom:1rem}
.fw-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.fw-name{color:#fff;font-weight:500;font-size:.875rem}
.fw-weight{font-size:.75rem;padding:.125rem .5rem;border-radius:9999px;background:#1e1e2e;color:#6b6b80;border:1px solid #2a2a3e}
.fw-source{color:#4a4a5e;font-size:.6875rem;margin-bottom:.5rem}
.fw-desc{color:#6b6b80;font-size:.75rem;line-height:1.6}

/* Evidence list */
.evidence{list-style:none;padding:0}
.evidence li{font-size:.75rem;color:#6b6b80;padding:.375rem 0;border-bottom:1px solid #15151f;line-height:1.5}
.evidence li:last-child{border-bottom:none}

/* Recommendations */
.rec{padding:.75rem;background:rgba(10,10,15,.3);border:1px solid #1e1e2e;border-radius:.5rem;margin-bottom:.5rem}
.rec-action{font-size:.8125rem;color:#fff;font-weight:500;margin-bottom:.25rem}
.rec-impact{font-size:.75rem;color:#6b6b80}

/* Priority labels */
.priority{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.priority-high{color:#ef4444}
.priority-medium{color:#eab308}
.priority-low{color:#22c55e}

/* CTA */
.cta{background:linear-gradient(135deg,rgba(124,106,239,.2),rgba(168,85,247,.2));border:1px solid rgba(124,106,239,.3);border-radius:1rem;padding:2rem;text-align:center;margin-bottom:3rem}
.cta h3{justify-content:center;font-size:1.25rem;margin-bottom:.5rem;display:block}
.cta p{color:#a3a3b8;font-size:.875rem;max-width:32rem;margin:0 auto 1.5rem}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#6d5bd0;color:#fff;border-radius:.75rem;font-weight:600;transition:background .15s}
.btn-primary:hover{background:#7c6aef;color:#fff}
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:1px solid #3a3a4e;color:#a3a3b8;border-radius:.75rem;font-weight:600;transition:all .15s}
.btn-secondary:hover{border-color:#4a4a5e;color:#fff}
.cta-note{color:#4a4a5e;font-size:.75rem;margin-top:1rem}

/* Footer */
footer{border-top:1px solid #2a2a3e;background:rgba(10,10,15,.8);padding:2rem 0;margin-top:3rem}
footer .inner{max-width:56rem;margin:0 auto;padding:0 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:.75rem}
@media(min-width:640px){footer .inner{padding:0 1.5rem}}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem 1.25rem;color:#6b6b80}
.footer-links a{color:#6b6b80;transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-sep{color:#2a2a3e}
.footer-copy{color:#4a4a5e}
.footer-copy a{color:#6b6b80}
.footer-copy a:hover{color:#fff}

/* Flex utilities */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.items-start{align-items:start}
.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.flex-1{flex:1}
.shrink-0{flex-shrink:0}
.min-w-0{min-width:0}

/* Spacing */
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}

/* Text */
.text-white{color:#fff}
.text-muted{color:#6b6b80}
.text-dim{color:#4a4a5e}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.text-center{text-align:center}
.font-mono{font-family:'SF Mono',Monaco,Consolas,monospace}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.leading-relaxed{line-height:1.6}

/* Scroll margin for anchored sections */
[id]{scroll-margin-top:6rem}

/* Visibility score component row */
.vs-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #15151f}
.vs-row:last-child{border-bottom:none}
.vs-name{width:8rem;font-size:.8125rem;color:#a3a3b8;flex-shrink:0}
.vs-score-num{width:2.5rem;text-align:right;font-size:.875rem;font-weight:600;flex-shrink:0}
.vs-weight{width:3rem;text-align:right;font-size:.6875rem;color:#4a4a5e;flex-shrink:0}