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

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #fff;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Dark block wraps topbar + hero on the homepage */
.dark-block {
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
}
.dark-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.dark-block::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -120px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(232,160,32,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.dark-block > * { position: relative; z-index: 1; }

/* Topbar: default dark background for standalone pages (privacy, terms).
   On the homepage it's inside .dark-block where the grid+glow show through. */
.topbar {
    background: #1a1a1a;
    padding: 14px 0;
}
.dark-block .topbar {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wordmark {
    font-size: 22px;
    font-weight: 700;
    color: #e89025;
    letter-spacing: 0.16em;
    text-decoration: none;
    transition: color 0.15s ease;
}
.wordmark:hover { color: #d49318; }
.topnav {
    display: flex;
    gap: 22px;
    align-items: center;
}
.topnav a {
    font-size: 13px;
    color: #9e9e9e;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.topnav a:hover { color: #fff; }

/* Hero (homepage) */
.hero {
    max-width: 960px;
    margin: 0 auto;
    padding: 72px 24px 80px;
    text-align: center;
}
.hero h1 {
    font-size: 54px;
    font-weight: 700;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
}
.hero h1 .accent { color: #E8A020; }
.hero .lede {
    font-size: 17px;
    line-height: 1.55;
    color: #bbb;
    max-width: 560px;
    margin: 0 auto 28px;
}
.hero-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.hero-note { font-size: 12px; color: #888; }
.hero-note a { color: inherit; text-decoration: underline; }
.hero-note a:hover { color: #fff; }

/* Buttons */
.btn {
    font-family: inherit;
    font-size: 14px;
    padding: 11px 22px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-primary { background: #E8A020; color: #1a1a1a; }
.btn-primary:hover { background: #d49318; }
.btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.btn-large { font-size: 15px; padding: 13px 26px; }

/* Container */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px 48px;
    flex: 1;
    width: 100%;
}

/* Report card (homepage) */
.report-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.card-lead {
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    padding: 20px 30px 16px;
    border-bottom: 1px solid #eee;
    text-align: center;
}
.card-lead p {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    max-width: 620px;
    margin: 0 auto;
}
.card-lead strong { color: #1a1a1a; }

/* Rendered report (example) */
.report {
    padding: 24px 30px 28px;
    background: #fafafa;
    line-height: 1.6;
    font-size: 14px;
    color: #333;
}
.report h1 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 3px solid #E8A020;
    font-weight: 700;
}
.report h2 {
    font-size: 15px;
    margin-top: 22px;
    margin-bottom: 10px;
    color: #1a1a1a;
    font-weight: 600;
}
.report h3 {
    font-size: 13px;
    margin-top: 14px;
    margin-bottom: 6px;
    color: #1a1a1a;
    font-weight: 600;
}
.report h4 {
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 4px;
    color: #1a1a1a;
    font-weight: 600;
}
.report p { margin: 4px 0; }
.report strong { color: #1a1a1a; }
.report table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    font-size: 13px;
}
.report th {
    background: #f0f0f0;
    text-align: left;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 8px 12px;
}
.report td { padding: 7px 12px; border-bottom: 1px solid #e8e8e8; }
.report details {
    margin: 6px 0;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
}
.report summary { cursor: pointer; padding: 4px 0; font-weight: 500; color: #333; }
.report summary a { color: #b07800; text-decoration: none; }
.report summary a:hover { text-decoration: underline; }
.report details[open] { padding-bottom: 10px; }
.report ul { padding-left: 22px; margin: 8px 0; }
.report li { margin: 3px 0; color: #555; font-size: 13px; }
.report a { color: #b07800; text-decoration: none; }
.report a:hover { text-decoration: underline; }

/* After-report install nudge */
.after-report { text-align: center; margin: 20px 0 4px; }
.after-report p { font-size: 13px; color: #888; margin-bottom: 12px; }

/* Sections (homepage) */
section { margin-bottom: 16px; }
section > h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 3px solid #E8A020;
    display: inline-block;
}

/* How it works */
.steps {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fefbf0;
    border: 2px solid #E8A020;
    color: #b07800;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}
.steps h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}
.steps p {
    font-size: 13px;
    line-height: 1.55;
    color: #555;
}
.steps a.inline {
    color: #b07800;
    font-weight: 600;
    text-decoration: none;
}
.steps a.inline:hover { text-decoration: underline; }

/* Trust */
.trust-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 28px;
}
.trust-list li {
    font-size: 13px;
    line-height: 1.55;
    color: #555;
    padding-left: 22px;
    position: relative;
}
.trust-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2a7a2a;
    font-weight: 700;
}
.trust-list strong { color: #1a1a1a; }
.trust-list a { color: #b07800; text-decoration: none; }
.trust-list a:hover { text-decoration: underline; }

/* Content pages (privacy, terms) */
.content {
    padding: 8px 0 32px;
    max-width: 720px;
}
.content h1 {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 32px;
    padding-bottom: 10px;
    border-bottom: 3px solid #E8A020;
    display: inline-block;
    letter-spacing: -0.015em;
}
.content h1:has(+ .effective-date) { margin-bottom: 8px; }
.content .effective-date {
    font-size: 13px;
    color: #888;
    margin-bottom: 32px;
}
.content h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 32px 0 12px;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
}
.content h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 20px 0 8px;
}
.content p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 12px;
}
.content ul, .content ol {
    padding-left: 24px;
    margin-bottom: 12px;
}
.content li {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 4px;
}
.content a { color: #b07800; text-decoration: none; }
.content a:hover { text-decoration: underline; }
.content strong { color: #1a1a1a; }

/* Footer */
.footer {
    background: #1a1a1a;
    padding: 18px 0;
    margin-top: auto;
}
.footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    font-weight: 500;
}
.footer-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.footer-left a,
.footer-right a {
    color: #e89025;
    text-decoration: none;
}
.footer-right a { margin-left: 16px; }
.footer-left a:hover,
.footer-right a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 800px) {
    .hero h1 { font-size: 36px; }
    .hero { padding: 48px 24px 70px; }
    .steps, .trust-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .topbar-inner { flex-direction: column; gap: 10px; text-align: center; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { text-align: center; }
    .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
}

/* ==================== Homepage v7 ==================== */

/* Built for trust */
.trust-section { background: #fff; padding: 56px 24px 32px; }
.trust-inner { max-width: 960px; margin: 0 auto; }
.trust-section h2 {
    font-size: 30px;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 3px solid #E8A020;
    padding-bottom: 10px;
    display: inline-block;
    margin-bottom: 14px;
}
.trust-lede {
    font-size: 15px;
    line-height: 1.65;
    color: #555;
    margin-bottom: 28px;
}
.trust-lede a {
    color: #b07800;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.trust-lede a:hover { color: #1a1a1a; }

.perm-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.perm-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 3px solid #E8A020;
    border-radius: 6px;
    padding: 16px 16px 18px;
}
.perm-card h3 { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.perm-tag-line {
    display: block;
    font-size: 10px;
    color: #b07800;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.perm-what { font-size: 12.5px; color: #444; line-height: 1.55; }

@media (max-width: 800px) { .perm-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .perm-row { grid-template-columns: 1fr; } }

/* Sample report tinted band */
.sample-tinted-band { background: #f5f5f5; padding: 48px 24px 28px; }
.sample-tinted-inner { max-width: 960px; margin: 0 auto; }

/* Tighter container spacing scoped to the homepage (privacy/terms keep defaults) */
body.home .container { padding: 16px 24px 12px; }

/* Early access */
.ea-section { padding: 16px 24px 48px; }
.ea-card {
    max-width: 820px;
    margin: 0 auto;
    background: #fefbf0;
    border: 1px solid #f0d9a3;
    border-radius: 10px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.ea-card-text { flex: 1 1 320px; }
.ea-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #b07800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ea-card-text p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a3a1a;
}
.ea-card-text strong { color: #1a1a1a; }
.ea-card-cta { flex: 0 0 auto; }
.ea-card-cta a {
    display: inline-block;
    background: #E8A020;
    color: #1a1a1a;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.ea-card-cta a:hover { background: #d49318; }

/* Per-org scorecard pages (/scorecard/<Org>/). The scorecard markdown body
   reuses .sample-tinted-band + .report-card + .report from the homepage
   sample, so kramdown-rendered scorecards visually match the marked.js
   sample at the top of the home page. */
.scorecard-title { padding: 56px 24px 8px; text-align: center; }
.scorecard-title-inner { max-width: 720px; margin: 0 auto; }
.scorecard-title h1 { font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; line-height: 1.25; }
.scorecard-title .scorecard-org-link { color: #b07800; text-decoration: none; border-bottom: 1px solid rgba(176,120,0,0.3); }
.scorecard-title .scorecard-org-link:hover { border-bottom-color: #b07800; }
.scorecard-title .scorecard-subtitle { font-size: 15px; color: #666; line-height: 1.55; }

.scorecard-cta { padding: 40px 24px 64px; text-align: center; }
.scorecard-cta-inner { max-width: 720px; margin: 0 auto; }
.scorecard-cta p { font-size: 13.5px; color: #666; margin-top: 18px; line-height: 1.55; }

/* ==================== Blog ==================== */

/* Blog index */
.blog-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.015em;
    padding-bottom: 10px;
    border-bottom: 3px solid #E8A020;
    display: inline-block;
    margin-bottom: 36px;
}

/* Dark featured callout for the latest post (re-uses the dark-block grid+glow vibe, but contained) */
.blog-featured {
    background: #1a1a1a;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    padding: 32px 36px 30px;
    margin-bottom: 40px;
}
.blog-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.blog-featured::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -120px;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(232,160,32,0.20) 0%, transparent 60%);
    pointer-events: none;
}
.blog-featured > * { position: relative; z-index: 1; }

.blog-featured-flag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #E8A020;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 3px 9px;
    border: 1px solid rgba(232,160,32,0.4);
    border-radius: 3px;
}
.blog-featured h2 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}
.blog-featured h2 a { color: inherit; text-decoration: none; }
.blog-featured h2 a:hover { color: #E8A020; }
.blog-featured-summary {
    font-size: 15px;
    line-height: 1.6;
    color: #bbb;
    max-width: 600px;
    margin-bottom: 18px;
}
.blog-featured-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog-featured-date {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.blog-read-cta {
    color: #E8A020;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid #E8A020;
}
.blog-read-cta:hover { color: #fff; }

.blog-older-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-bottom: 14px;
}
.blog-post-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 28px;
    padding: 20px 0;
    border-bottom: 1px solid #ececec;
    align-items: center;
}
.blog-post-row:first-of-type { border-top: 1px solid #ececec; }
.blog-post-row .blog-row-date {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}
.blog-post-row h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
    margin-bottom: 4px;
}
.blog-post-row h3 a { color: inherit; text-decoration: none; }
.blog-post-row h3 a:hover { color: #b07800; }
.blog-post-row p {
    font-size: 13.5px;
    color: #666;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .blog-featured h2 { font-size: 22px; }
    .blog-post-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Blog post page */
.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.15s ease;
    margin-bottom: 32px;
}
.blog-back-link:hover { border-color: #E8A020; color: #b07800; }
.blog-back-link .arrow { font-size: 14px; line-height: 1; }

.blog-post-masthead {
    margin-bottom: 36px;
}
.blog-post-masthead h1 {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid #E8A020;
    display: inline-block;
}
.blog-post-masthead .blog-post-date {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

.blog-post-content { max-width: 720px; }
.blog-post-content p:first-of-type {
    font-size: 18px;
    line-height: 1.6;
    color: #1a1a1a;
    font-weight: 500;
    margin-bottom: 20px;
}
.blog-post-content p {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    margin-bottom: 18px;
}
.blog-post-content ul, .blog-post-content ol {
    padding-left: 24px;
    margin: 0 0 18px;
}
.blog-post-content li {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    margin-bottom: 6px;
}
.blog-post-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 36px 0 12px;
    letter-spacing: -0.01em;
}
.blog-post-content h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 26px 0 10px;
}
.blog-post-content a {
    color: #b07800;
    text-decoration: none;
    border-bottom: 1px solid rgba(176,120,0,0.3);
}
.blog-post-content a:hover { border-bottom-color: #b07800; }
.blog-post-content code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13.5px;
    background: #f4f4f4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #1a1a1a;
}

@media (max-width: 720px) {
    .blog-post-masthead h1 { font-size: 28px; }
}

/* --- Subscribe form (Kit) --- */
/* Shared base */
.bd-form p.bd-body { font-size: 14.5px; color: #555; line-height: 1.55; margin: 0 0 16px; }
/* The row and status share the same grid cell; only one is visible at a time
   so the form does not jump on submit and no whitespace is reserved below. */
.bd-form-cell {
    display: grid;
    grid-template-areas: "cell";
    max-width: 460px;
}
.bd-row, .bd-status {
    grid-area: cell;
}
.bd-row { display: flex; gap: 8px; }
.bd-row input[type=email] {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 2px;
    font: inherit;
    font-size: 14px;
    background: #fff;
}
.bd-row input[type=email]:focus {
    outline: none;
    border-color: #b07800;
    box-shadow: 0 0 0 3px rgba(176,120,0,0.10);
}
.bd-row input[type=email][aria-invalid="true"] {
    border-color: #b00020;
    box-shadow: 0 0 0 3px rgba(176,0,32,0.10);
}
.bd-row button {
    background: #E8A020;
    color: #1a1a1a;
    border: none;
    padding: 0 22px;
    border-radius: 2px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 110px;
}
.bd-row button:hover { background: #f3b234; }
.bd-status {
    display: flex;
    align-items: center;
    visibility: hidden;
    font-size: 13.5px;
    color: #333;
    line-height: 1.4;
}
.bd-status a { color: #b07800; text-decoration: none; border-bottom: 1px solid rgba(176,120,0,0.3); }
.bd-status a:hover { border-bottom-color: #b07800; }
.bd-status.success { color: #2c7a2c; }
.bd-status.error { color: #b00020; }
.bd-status.error a { color: #b00020; border-bottom-color: rgba(176,0,32,0.3); }
.bd-status.error a:hover { border-bottom-color: #b00020; }
/* On submit or completion, hide the row and reveal the status in place. */
.bd-form.is-busy .bd-row,
.bd-form.is-done .bd-row { visibility: hidden; }
.bd-form.is-busy .bd-status,
.bd-form.is-done .bd-status { visibility: visible; }

/* Post variant (D3) - integrated into blog post body, no card, hairline above */
.bd-form--post { margin: 36px 0 12px; padding-top: 36px; border-top: 1px solid #eee; }
.bd-form--post h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

/* List variant (BL1) - soft tinted card at bottom of blog list */
.bd-form--list {
    margin: 32px 0 12px;
    padding: 24px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
}
.bd-form--list h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px;
    color: #1a1a1a;
    letter-spacing: 0;
}

@media (max-width: 540px) {
    .bd-form-cell { max-width: 100%; }
    .bd-row { flex-direction: column; }
    .bd-row button { padding: 11px; }
}