/* The SEO landing pages (docs/site/seo-batch1-SPEC.md section 2.3). Tokens come from site.css, so both themes work. */
.hero .by{font-size:14px;color:var(--muted);margin:-16px 0 24px}
/* what the engine read: a name, how it was filed, why */
table.reads{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;line-height:1.45}
table.reads th,table.reads td{text-align:left;padding:10px 14px 10px 0;vertical-align:top;border-bottom:1px solid var(--line)}
table.reads th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800;white-space:nowrap}
table.reads td:first-child{font-weight:800;white-space:nowrap}
table.reads tr.off td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
table.reads tr.off td:nth-child(2){color:var(--bad);font-weight:800}
table.reads tr.off td:first-child{padding-left:10px}
/* on a phone each row stacks: name, then what it was filed as, then why */
@media (max-width:699px){table.reads thead{display:none}table.reads,table.reads tbody,table.reads tr,table.reads td{display:block}table.reads tr{padding:10px 0;border-bottom:1px solid var(--line)}table.reads td{border:0;padding:1px 0;white-space:normal}table.reads td:nth-child(2)::before{content:"Filed as ";font-weight:400;color:var(--muted)}table.reads tr.off td:first-child{padding-left:0}table.reads tr.off td{background:none}table.reads tr.off{background:color-mix(in srgb,var(--accent) 7%,transparent);padding-left:10px;padding-right:10px}}
/* two stat boxes */
.stat2{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0;max-width:680px}
.stat2 p{margin:0;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:16px;font-size:15px;color:var(--muted);line-height:1.4}
.stat2 b{display:block;font-size:40px;line-height:1.1;font-weight:800;color:var(--ink);letter-spacing:-.02em}
@media (min-width:480px){.stat2{grid-template-columns:1fr 1fr}}
/* diptych: two sets of examples side by side */
.duo{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0}
.duo h3{font-size:16px;margin:0 0 12px}
.duo .cards{margin:0 0 12px}
.duo p{font-size:14px;color:var(--muted)}
@media (min-width:720px){.duo{grid-template-columns:1fr 1fr;gap:32px}}
/* the buy row at the end of an ask section */
.ask .ask-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
/* a dark band in both themes */
.sec.noir{--ink:#f3eee8;--muted:#b3aaa1;--line:#3a342f;--panel:#1d1a17;background:#0d0b0a;color:var(--ink);border-block:1px solid var(--line)}
.sec.noir a{color:var(--dev-link,#ffb08a)}
.sec.noir code{background:rgba(255,255,255,.12);color:var(--ink)}
.sec.noir .card{border-color:var(--line)}
.sec.noir .strip-t{color:var(--ink)}
.sec ul:not(.cards):not(.lg-grid){padding-left:1.2em}
.sec ul:not(.cards)>li{margin:0 0 .5em}