/* Informational pages: forthem.com look. White, Aktiv Grotesk (Adobe kit) with Inter Tight fallback, mono labels. */
:root { --ink:#000; --paper:#fff; --poppy:#DE0100; --grass:#BABA00; --stone:#CEC6BA; --stone2:#ADA7A0; --moss:#524A26; --hydrangea:#0969E4; --rule:#000; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--paper); color:var(--ink); font-family:aktiv-grotesk, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; }
a { color:var(--ink); text-underline-offset:3px; }
a:hover { color:var(--poppy); }
img { display:block; max-width:100%; height:auto; }
.mono { font-family:"Roboto Mono", ui-monospace, monospace; letter-spacing:0.02em; }
.nav { display:flex; align-items:center; gap:1.4rem; padding:0.9rem 1.25rem; border-bottom:1px solid var(--rule); }
.nav .logo img { height:30px; width:auto; }
.nav .spacer { flex:1; }
.nav a.link { text-decoration:none; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.nav a.link:hover { color:var(--poppy); }
@media (max-width:600px) { .nav { gap:0.9rem; } .nav a.link { font-size:0.66rem; } }
.doc { max-width: 920px; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
.eyebrow { font-family:"Roboto Mono", monospace; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--moss); margin-bottom:0.9rem; }
h1 { font-size:clamp(2.2rem, 6vw, 3.6rem); font-weight:700; text-transform:uppercase; letter-spacing:-0.03em; line-height:0.98; margin-bottom:1rem; }
h1 em { font-style:normal; color:var(--poppy); }
.intro { font-size:1.05rem; max-width:62ch; color:#222; margin-bottom:1.6rem; }
.actions { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; margin-bottom:0.5rem; }
.btn { display:inline-block; text-decoration:none; background:var(--ink); color:var(--paper); font-size:0.8rem; font-weight:700; letter-spacing:-0.01em; text-transform:uppercase; padding:0.6rem 1.4rem; border-radius:999px; border:1px solid var(--ink); }
.btn:hover { background:var(--poppy); border-color:var(--poppy); color:#fff; }
.btn.secondary { background:var(--paper); color:var(--ink); }
.btn.secondary:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.meta { font-size:0.82rem; color:var(--moss); }
section { padding:2.2rem 0 0.6rem; border-top:1px solid var(--rule); margin-top:2.2rem; }
h2 { font-size:1.5rem; font-weight:700; text-transform:uppercase; letter-spacing:-0.02em; margin-bottom:0.9rem; }
h3 { font-size:1rem; font-weight:700; margin:1.2rem 0 0.4rem; }
p { margin-bottom: 0.9rem; max-width:68ch; }
section > p.lead { color:#333; }
.glance { display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule); }
@media (min-width:640px) { .glance { grid-template-columns:1fr 1fr; } }
.glance div { display:grid; grid-template-columns:11rem 1fr; gap:1rem; padding:0.7rem 0; border-bottom:1px solid var(--stone); font-size:0.92rem; }
.glance dt { font-family:"Roboto Mono", monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--moss); padding-top:0.2rem; }
.glance dd { font-weight:600; }
table { width:100%; border-collapse:collapse; font-size:0.92rem; margin:0.6rem 0 0.8rem; }
th { font-family:"Roboto Mono", monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss); text-align:left; padding:0.55rem 0.6rem 0.55rem 0; border-bottom:1px solid var(--rule); font-weight:400; }
td { padding:0.75rem 0.6rem 0.75rem 0; border-bottom:1px solid var(--stone); vertical-align:top; }
td strong { font-weight:700; }
.tag { display:inline-block; font-family:"Roboto Mono", monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; background:var(--grass); color:var(--ink); padding:0.2rem 0.5rem; border-radius:999px; margin-left:0.4rem; vertical-align:middle; }
.note { font-size:0.82rem; color:var(--moss); }
ol.steps { list-style:none; counter-reset:s; display:grid; gap:0.9rem; margin:0.4rem 0 1.2rem; }
ol.steps li { counter-increment:s; display:grid; grid-template-columns:2.2rem 1fr; gap:0.8rem; align-items:start; font-size:0.95rem; }
ol.steps li::before { content:counter(s); font-weight:700; font-size:1.4rem; line-height:1; color:var(--poppy); }
ol.steps li strong { display:block; font-weight:700; margin-bottom:0.15rem; }
.issues { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:0.6rem; }
@media (min-width:720px) { .issues { grid-template-columns:repeat(4,1fr); } }
.issue { text-decoration:none; }
.issue img { width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--rule); margin-bottom:0.55rem; }
.issue .t { font-weight:700; font-size:0.95rem; }
.issue .s { font-family:"Roboto Mono", monospace; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--moss); margin-top:0.15rem; }
.issue:hover .t { color:var(--poppy); }
.faq dt { font-weight:700; margin-top:1.1rem; }
.faq dd { color:#222; max-width:68ch; margin-top:0.25rem; font-size:0.95rem; }
.contact { display:grid; gap:0.4rem; font-size:0.95rem; }
footer { border-top:1px solid var(--rule); padding:1.6rem 1.25rem; font-family:"Roboto Mono", monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--moss); display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; justify-content:center; }
footer a { color:var(--ink); text-decoration:none; }
footer a:hover { color:var(--poppy); }
/* ---- informational landing components (green = GRASS #BABA00, used as fills behind black text) ---- */
.hero { max-width:1100px; margin:0 auto; padding:2.6rem 1.25rem 2.2rem; display:grid; gap:2rem; align-items:center; }
@media (min-width:880px) { .hero { grid-template-columns:1.1fr 0.9fr; gap:4rem; padding:3.5rem 2rem 3rem; } }
.hero h1 { font-size:clamp(2.3rem, 5.6vw, 3.8rem); font-weight:700; text-transform:uppercase; letter-spacing:-0.03em; line-height:0.98; margin:0 0 1.1rem; }
.hero h1 mark { background:var(--grass); color:var(--ink); padding:0 0.15em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero .intro { margin-bottom:1.4rem; }
.hero .meta { margin-top:0.9rem; }
.photo { position:relative; padding:0 1rem 1rem 0; }
.photo::before { content:""; position:absolute; inset:1rem 0 0 1rem; background:var(--grass); }
.photo img { position:relative; width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--ink); }
.numbers { background:var(--grass); color:var(--ink); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.numbers .inner { max-width:1100px; margin:0 auto; padding:1.4rem 1.25rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2rem; }
@media (min-width:760px) { .numbers .inner { grid-template-columns:repeat(4,1fr); padding:1.6rem 2rem; } }
.numbers .v { font-size:1.9rem; font-weight:700; letter-spacing:-0.03em; line-height:1; }
.numbers .l { font-family:"Roboto Mono", monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; margin-top:0.35rem; }
.content { max-width:1100px; margin:0 auto; padding:0 1.25rem 3rem; }
@media (min-width:880px) { .content { padding:0 2rem 4rem; } }
.content section { border-top:0; margin-top:0; padding:3rem 0 0; }
.content h2 { font-size:1.7rem; }
.tiers { display:grid; gap:1rem; margin:1rem 0 1.4rem; }
@media (min-width:720px) { .tiers { grid-template-columns:1fr 1fr; } }
.tier { border:1px solid var(--ink); padding:1.4rem 1.5rem 1.3rem; display:grid; gap:0.5rem; position:relative; }
.tier .name { font-family:"Roboto Mono", monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss); }
.tier .price { font-size:2.8rem; font-weight:700; letter-spacing:-0.04em; line-height:1; }
.tier .price small { font-family:"Roboto Mono", monospace; font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--moss); margin-left:0.5rem; }
.tier ul { list-style:none; font-size:0.92rem; line-height:1.55; }
.tier li::before { content:"– "; color:var(--stone2); }
.tier .flag { position:absolute; top:-0.75rem; left:1.5rem; background:var(--grass); border:1px solid var(--ink); font-family:"Roboto Mono", monospace; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; padding:0.25rem 0.6rem; }
.steps3 { display:grid; gap:1.2rem; margin-top:1rem; }
@media (min-width:760px) { .steps3 { grid-template-columns:repeat(3,1fr); gap:2rem; } }
.steps3 .n { width:2.2rem; height:2.2rem; border-radius:50%; background:var(--grass); border:1px solid var(--ink); display:grid; place-items:center; font-weight:700; margin-bottom:0.8rem; }
.steps3 h3 { margin:0 0 0.35rem; font-size:1.05rem; }
.steps3 p { font-size:0.92rem; color:#222; }
.split { display:grid; gap:2rem; align-items:start; }
@media (min-width:880px) { .split { grid-template-columns:1fr 1fr; gap:3rem; } }
.stickers { border:1px solid var(--ink); display:grid; gap:1rem; padding:1.3rem 1.4rem; align-items:center; margin-top:1rem; }
@media (min-width:720px) { .stickers { grid-template-columns:1fr auto; } }
.stickers p { margin:0; font-size:0.95rem; }
.endband { background:var(--ink); color:var(--paper); }
.endband .inner { max-width:1100px; margin:0 auto; padding:2.4rem 1.25rem; display:grid; gap:1rem; align-items:center; }
@media (min-width:880px) { .endband .inner { grid-template-columns:1fr auto; padding:2.6rem 2rem; } }
.endband h2 { color:var(--paper); margin-bottom:0.3rem; }
.endband p { color:rgba(255,255,255,0.8); margin:0; font-size:0.95rem; }
.endband .btn { background:var(--grass); color:var(--ink); border-color:var(--grass); }
.endband .btn:hover { background:var(--paper); border-color:var(--paper); color:var(--ink); }
.endband a.mail { color:var(--grass); }
/* ---- content pages (jobs, creators) ---- */
.hero.solo { grid-template-columns:1fr; padding-bottom:1rem; }
.hero .intro:empty { display:none; }
.prose { padding-top:0.5rem; }
.prose > h2:first-child { margin-top:0; }
.prose h2 { margin-top:2.6rem; }
.prose h3 { margin-top:1.6rem; }
.prose ul, .prose ol { margin:0 0 1rem 1.2rem; max-width:72ch; }
.prose li { margin-bottom:0.3rem; }
.prose hr { border:0; border-top:1px solid var(--rule); margin:2.4rem 0 0; }
.prose img { border:1px solid var(--rule); margin:1rem 0; }
.callout { border:1px solid var(--ink); border-left:6px solid var(--grass); padding:1rem 1.2rem; margin:1rem 0 1.2rem; max-width:none; }
.callout p { max-width:none; }
.callout p:last-child, .callout ul:last-child { margin-bottom:0; }
.callout ul { margin-left:1.2rem; }
.callout.poppy { border-left-color:var(--poppy); }
.callout.blue { border-left-color:var(--ink); }
.callout .k { display:block; font-family:"Roboto Mono", monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss); margin-bottom:0.4rem; }
.grid { display:grid; gap:1rem; margin:1rem 0 1.5rem; }
@media (min-width:720px) { .grid { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } }
.card { display:block; border:1px solid var(--ink); padding:1.2rem 1.3rem; text-decoration:none; color:var(--ink); transition:background .12s ease; }
.card:hover { background:var(--grass); color:var(--ink); }
.card h3 { margin:0 0 0.35rem; font-size:1.05rem; }
.card p { margin:0; font-size:0.9rem; color:#333; }
.card:hover p { color:var(--ink); }
.links { list-style:none; margin-left:0 !important; }
.links li::before { content:"→ "; color:var(--moss); }
.two { display:grid; gap:1.5rem; margin:1rem 0; }
@media (min-width:720px) { .two { grid-template-columns:1fr 1fr; } }
.two .callout { margin:0; }
.checklist { list-style:none; margin-left:0 !important; }
.checklist li { padding-left:1.6rem; position:relative; }
.checklist li::before { content:""; position:absolute; left:0; top:0.3rem; width:0.9rem; height:0.9rem; border:1px solid var(--ink); background:var(--paper); }
.hooks .callout { padding:0.7rem 1rem; margin:0.5rem 0; font-style:italic; border-left-color:var(--grass); }
.values details { border-top:1px solid var(--stone); padding:0.7rem 0; }
.values details:last-child { border-bottom:1px solid var(--stone); }
.values summary { cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; }
.values summary::-webkit-details-marker { display:none; }
.values summary::after { content:"+"; font-weight:400; }
.values details[open] summary::after { content:"–"; }
.values ul { margin:0.5rem 0 0.2rem 1.2rem; font-size:0.92rem; }
.tag { margin-left:0; margin-right:0.4rem; }
.safezone { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:1rem; align-items:start; margin:1rem 0; }
.safezone .callout { margin:0; }
.safezone img { margin:0; }
.prose .issues { margin:1rem 0 1.5rem; }
/* ---- hub ---- */
.hub-cards { display:grid; gap:1.2rem; margin:1rem 0 0; }
@media (min-width:760px) { .hub-cards { grid-template-columns:repeat(3,1fr); } }
.hub-card { display:flex; flex-direction:column; border:1px solid var(--ink); text-decoration:none; color:var(--ink); }
.hub-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-bottom:1px solid var(--ink); margin:0; }
.hub-card .b { padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:0.4rem; flex:1; }
.hub-card .eyebrow { margin:0; }
.hub-card h3 { margin:0; font-size:1.25rem; }
.hub-card p { margin:0; font-size:0.92rem; color:#333; flex:1; }
.hub-card .go { font-family:"Roboto Mono", monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.4rem; }
.hub-card:hover .go { color:var(--poppy); }
.hub-card:hover img { filter:saturate(1.1); }
.contact-box { border:1px solid var(--ink); display:grid; gap:1rem; padding:1.4rem 1.5rem; align-items:center; margin-top:3rem; }
@media (min-width:760px) { .contact-box { grid-template-columns:1fr auto; } }
.contact-box h2 { margin-bottom:0.2rem; font-size:1.3rem; }
.contact-box p { margin:0; font-size:0.95rem; color:#333; }