/* AI Truth homepage: black and white only. Huge, heavy type. Manifesto energy, premium finish. */
:root { --k: #000; --w: #fff; --g: #8a8a8a; --line: #2a2a2a;
  --heavy: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial Black", Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", Georgia, serif; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--k); color: var(--w); font-family: var(--heavy); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--w); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.testbar { background: var(--w); color: var(--k); font: 700 12px/1.4 var(--heavy); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 8px 16px; }
.w { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .w { padding: 0 16px; } }

nav.top { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.logo { font: 900 20px/1 var(--heavy); letter-spacing: -.02em; text-decoration: none; }
.logo b { font-weight: 900; border: 2px solid var(--w); padding: 2px 6px; margin-left: 4px; }
nav.top .links a { font: 600 14px var(--heavy); text-decoration: none; margin-left: 22px; color: var(--g); }
nav.top .links a:hover { color: var(--w); }
.newbadge { font: 800 10px var(--heavy); letter-spacing: .1em; background: var(--w); color: var(--k); padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
@media (max-width: 640px) { nav.top .links a { margin-left: 12px; font-size: 13px; } nav.top .links a.opt { display: none; } }

.hero { padding: 9vh 0 6vh; }
.hero h1 { font: 900 clamp(52px, 10.5vw, 168px)/.9 var(--heavy); letter-spacing: -.055em; margin: 0; text-transform: uppercase; }
.hero h1 .dim { color: var(--g); }
.lines { list-style: none; padding: 0; margin: 6vh 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--w); }
.lines li { font: 800 clamp(20px, 2.4vw, 30px)/1.15 var(--heavy); letter-spacing: -.02em; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line); }
.lines li span { display: block; font: 500 15px/1.5 var(--heavy); letter-spacing: 0; color: var(--g); margin-top: 8px; }
@media (max-width: 760px) { .lines { grid-template-columns: 1fr; } }

/* the ask */
.ask { padding: 9vh 0; border-top: 2px solid var(--w); }
.kicker { font: 800 13px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 0 0 18px; }
.ask h2, .block h2 { font: 900 clamp(38px, 6vw, 88px)/.95 var(--heavy); letter-spacing: -.045em; margin: 0 0 28px; text-transform: uppercase; }
.tpl { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; margin: 0 0 30px; }
.tpl h3 { font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 0 0 10px; }
.tpl button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--w); font: 700 18px/1.3 var(--heavy); padding: 12px 0; cursor: pointer; letter-spacing: -.01em; }
.tpl .featured button { font-size: 22px; }
.tpl button:hover { text-decoration: underline; text-underline-offset: 4px; }
.tpl button .blank { display: inline-block; min-width: 2.2em; border-bottom: 3px solid var(--w); }
@media (max-width: 860px) { .tpl { grid-template-columns: 1fr; } }

form.box { border: 2px solid var(--w); padding: 26px; }
form.box label.l { display: block; font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 18px 0 8px; }
form.box label.l:first-child { margin-top: 0; }
form.box textarea, form.box input[type=email], .helper textarea, .clin { width: 100%; background: var(--k); color: var(--w); border: 1px solid #555; padding: 14px; font: 600 20px/1.35 var(--heavy); border-radius: 0; }
form.box textarea::placeholder, form.box input::placeholder { color: #666; }
form.box textarea:focus, form.box input:focus, .clin:focus { outline: 2px solid var(--w); outline-offset: 0; border-color: var(--w); }
textarea#q { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.015em; }
.tips { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; padding: 0; margin: 10px 0 0; font: 600 13px var(--heavy); color: var(--g); }
.tips li::before { content: "— "; }
details.said { margin-top: 16px; }
details.said summary { cursor: pointer; font: 700 15px var(--heavy); }
details.said summary .opt { color: var(--g); font-weight: 500; }
details.said textarea { margin-top: 10px; font-size: 16px; font-weight: 500; }
.btn { background: var(--w); color: var(--k); border: 2px solid var(--w); font: 900 18px var(--heavy); letter-spacing: .02em; text-transform: uppercase; padding: 18px 26px; cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--k); color: var(--w); }
.btn.ghost { background: var(--k); color: var(--w); font-size: 14px; padding: 12px 16px; }
.btn.ghost:hover { background: var(--w); color: var(--k); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.wide { width: 100%; margin-top: 22px; }
.row { margin-top: 16px; }
.helper { border-left: 4px solid var(--w); padding: 4px 0 4px 18px; margin: 20px 0 0; }
.helper .l { margin-top: 0 !important; }
.why { font: 500 14px var(--heavy); color: var(--g); }
.clin { font-size: 16px; margin-bottom: 8px; }
.fine { font: 500 13px/1.5 var(--heavy); color: var(--g); margin: 14px 0 0; }
.err { font: 700 15px var(--heavy); margin: 14px 0 0; text-decoration: underline; }

/* manifesto + sections */
.block { padding: 9vh 0; border-top: 2px solid var(--w); }
.manifesto p.big { font: 900 clamp(30px, 4.6vw, 64px)/1.02 var(--heavy); letter-spacing: -.04em; margin: 0 0 22px; max-width: 18ch; }
.manifesto p.small { font: 500 18px/1.55 var(--heavy); color: var(--g); max-width: 680px; }
.manifesto p.small a, .why7 a, .src a { color: var(--g); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.steps li { counter-increment: s; border-top: 1px solid var(--line); padding: 20px 0 26px; font: 500 16px/1.5 var(--heavy); color: var(--g); }
.steps li::before { content: "0" counter(s); display: block; font: 900 44px/1 var(--heavy); color: var(--w); margin-bottom: 10px; letter-spacing: -.04em; }
.steps li b { color: var(--w); font-weight: 800; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.labels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.labels span { font: 800 12px var(--heavy); letter-spacing: .14em; text-transform: uppercase; border: 2px solid var(--w); padding: 8px 12px; }
.labels span.f { background: var(--w); color: var(--k); }
.labels span.d { border-style: dashed; }
.labels span.u { border-color: var(--g); color: var(--g); }
.why7 { list-style: none; padding: 0; margin: 0; counter-reset: y; }
.why7 li { counter-increment: y; display: grid; grid-template-columns: 70px 1fr; gap: 12px; border-top: 1px solid var(--line); padding: 18px 0; font: 500 17px/1.5 var(--heavy); color: var(--g); }
.why7 li::before { content: counter(y); font: 900 34px/1 var(--heavy); color: var(--w); }
.why7 li b { display: block; color: var(--w); font: 800 22px/1.2 var(--heavy); letter-spacing: -.015em; margin-bottom: 4px; }
.diff { margin-top: 34px; font: 800 clamp(22px, 2.6vw, 34px)/1.2 var(--heavy); letter-spacing: -.02em; max-width: 900px; }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--w); margin-top: 30px; }
.versus div { padding: 22px; font: 500 16px/1.6 var(--heavy); }
.versus div:first-child { border-right: 2px solid var(--w); color: var(--g); }
.versus h3 { font: 900 13px var(--heavy); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; color: var(--w); }
.versus ul { margin: 0; padding-left: 18px; }
@media (max-width: 640px) { .versus { grid-template-columns: 1fr; } .versus div:first-child { border-right: 0; border-bottom: 2px solid var(--w); } }
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--w); }
.price > div { padding: 28px; }
.price > div + div { border-left: 2px solid var(--w); }
.price .amt { font: 900 clamp(48px, 7vw, 96px)/1 var(--heavy); letter-spacing: -.05em; }
.price .per { font: 700 15px var(--heavy); color: var(--g); }
.price p { font: 500 16px/1.5 var(--heavy); color: var(--g); }
@media (max-width: 640px) { .price { grid-template-columns: 1fr; } .price > div + div { border-left: 0; border-top: 2px solid var(--w); } }
form.join { display: flex; gap: 0; max-width: 620px; border: 2px solid var(--w); }
form.join input { flex: 1; min-width: 0; background: var(--k); color: var(--w); border: 0; padding: 16px; font: 600 18px var(--heavy); }
form.join input:focus { outline: none; }
@media (max-width: 520px) { form.join { flex-direction: column; } }
.note { font: 500 14px var(--heavy); color: var(--g); margin-top: 12px; }
.samples details { border-top: 1px solid var(--line); padding: 16px 0; }
.samples summary { cursor: pointer; font: 800 22px/1.25 var(--heavy); letter-spacing: -.015em; }
footer { border-top: 2px solid var(--w); padding: 40px 0 60px; font: 500 14px/1.6 var(--heavy); color: var(--g); }
footer .big { font: 900 clamp(40px, 8vw, 120px)/.9 var(--heavy); color: var(--w); letter-spacing: -.05em; margin: 0 0 24px; }
footer a { margin-right: 16px; }
/* sample answers rendered inside the homepage (black and white) */
.samples .card { border-top: 1px solid var(--line); padding: 16px 0; }
.samples .card h2 { font: 800 12px var(--heavy); letter-spacing: .16em; text-transform: uppercase; color: var(--g); margin: 0 0 10px; }
.samples .ans, .samples .claims .ct, .samples .wont li, .samples .other p { font: 500 18px/1.55 var(--serif); }
.samples .badge { display: inline-block; font: 800 11px var(--heavy); letter-spacing: .14em; text-transform: uppercase; border: 2px solid var(--w); padding: 4px 8px; margin-right: 8px; }
.samples .b-proven { background: var(--w); color: var(--k); } .samples .b-disputed { border-style: dashed; } .samples .b-unknown { border-color: var(--g); color: var(--g); }
.samples ul { list-style: none; padding: 0; } .samples .meta, .samples .stamp, .samples .notice, .samples .kind { font: 500 13px var(--heavy); color: var(--g); display: block; }
.samples .wont { border: 2px solid var(--w); padding: 16px; }
.samples a { color: var(--g); }

/* the numbers */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--w); }
.stats figure { margin: 0; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.stats .n { font: 900 clamp(64px, 9vw, 132px)/.9 var(--heavy); letter-spacing: -.06em; margin: 0 0 12px; }
.stats figcaption { font: 500 15px/1.5 var(--heavy); color: var(--g); }
.stats figcaption b { display: block; color: var(--w); font: 800 20px/1.25 var(--heavy); letter-spacing: -.01em; margin-bottom: 6px; }
.stats figcaption a { color: var(--g); white-space: nowrap; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }
/* mission */
.mission .big2 { font: 600 clamp(20px, 2.3vw, 28px)/1.4 var(--heavy); max-width: 900px; letter-spacing: -.01em; }
.mission .close { font: 900 clamp(26px, 3.6vw, 48px)/1.05 var(--heavy); letter-spacing: -.035em; margin-top: 28px; max-width: 20ch; }
/* human review + what $1 buys */
.human .huge { font: 900 clamp(40px, 7vw, 104px)/.95 var(--heavy); letter-spacing: -.05em; margin: 0; text-transform: uppercase; }
.buys { list-style: none; padding: 0; margin: 14px 0 0; font: 600 16px/1.45 var(--heavy); }
.buys li { padding: 6px 0; border-top: 1px solid var(--line); }
.buys li::before { content: "✓  "; }

.nowaste { border: 2px solid var(--w); padding: 22px 24px; margin: 0 0 26px; }
.nowaste .big3 { font: 900 clamp(26px, 3.6vw, 44px)/1.05 var(--heavy); letter-spacing: -.035em; margin: 0 0 12px; }
.nowaste ul { margin: 0; padding: 0; list-style: none; font: 600 16px/1.5 var(--heavy); color: var(--g); }
.nowaste li { padding: 5px 0; border-top: 1px solid var(--line); }
.nowaste li::before { content: "✓  "; color: var(--w); }
.nowaste .sub3 { font: 800 18px var(--heavy); margin: 0 0 10px; }
.buildercard { border: 2px dashed var(--g); padding: 22px 24px; margin-top: 18px; }
.buildercard .bline { font: 900 clamp(22px, 3vw, 36px)/1.08 var(--heavy); letter-spacing: -.03em; margin: 0 0 8px; }
.nofree { font: 900 clamp(20px, 2.4vw, 28px)/1.2 var(--heavy); letter-spacing: -.02em; margin: 18px 0 0; color: var(--w); }
.nofree.small { font: 800 15px/1.4 var(--heavy); margin: 12px 0 10px; letter-spacing: 0; }
.reviewline { font: 800 clamp(20px, 2.6vw, 28px)/1.2 var(--heavy); margin: 18px 0 0; }
.packs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--w); border-top: 0; }
.packs li { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.packs li + li { border-left: 2px solid var(--w); }
.packs b { font: 900 clamp(28px, 4vw, 44px)/1 var(--heavy); letter-spacing: -.03em; }
.packs span { font: 700 15px var(--heavy); }
.packs i { font: 600 13px var(--heavy); font-style: normal; color: var(--g); }
.packs .best { background: var(--w); color: var(--k); }
.packs .best i { color: inherit; opacity: .7; }
.packs em { font: 800 11px var(--heavy); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 640px) { .packs { grid-template-columns: 1fr; } .packs li + li { border-left: 0; border-top: 2px solid var(--w); } }
