/* ============================================================ */
/* AI INSTRUCTIONS PAGE — page-specific styles                    */
/* Loads AFTER https://www.lynxseo.com/style.css, which supplies  */
/* the base tokens, header/nav, buttons and footer.               */
/* ============================================================ */

/* Not in style.css: keeps overscroll areas dark instead of white */
html{background:#0a0a0f}

/* Page component styles (.ab), mapped to the design tokens in style.css */
.ab{--ab-red:var(--red,#ed3631);--ab-white:var(--white,#fff);--ab-text:var(--text,#c7c7d6);--ab-muted:var(--muted,#71718c);--ab-line:var(--line,#26263a);--ab-panel:var(--panel,#15151f);--ab-head:var(--display,'Krona One',sans-serif);--ab-body:var(--mono,'DM Mono',ui-monospace,monospace);color:var(--ab-text);font-family:var(--ab-body)}
.ab-wrap{width:100%;max-width:var(--maxw,1180px);margin:0 auto;padding:0 28px}
.ab-hero{padding:74px 0 64px;border-bottom:1px solid var(--ab-line)}
.ab-crumbs{font-size:.8rem;color:var(--ab-muted);margin-bottom:1.5rem}
.ab-crumbs a{color:var(--ab-muted);text-decoration:none}
.ab-crumbs a:hover{color:var(--ab-red)}
.ab h1{font-family:var(--ab-head);font-size:clamp(34px,4.6vw,56px);line-height:1.1;color:var(--ab-white);margin:0 0 1.75rem}
.ab-lede{font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.55;max-width:44ch;margin:0 0 1.25rem}
.ab-sub{color:var(--ab-text);line-height:1.7;max-width:62ch;margin:0 0 2.5rem}
.ab-toc{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ab-toc a{display:inline-block;padding:.45rem .9rem;border:1px solid var(--ab-line);border-radius:999px;color:var(--ab-text);font-size:.85rem;text-decoration:none;transition:border-color .2s,color .2s}
.ab-toc a:hover{border-color:var(--ab-red);color:var(--ab-red)}
.ab-sec{padding:5rem 0;border-bottom:1px solid var(--ab-line);scroll-margin-top:80px}
.ab h2{font-family:var(--ab-head);font-size:clamp(26px,3vw,40px);line-height:1.2;color:var(--ab-white);margin:0 0 1.25rem}
.ab h3{font-family:var(--ab-head);font-size:1rem;line-height:1.4;color:var(--ab-white);margin:0 0 .75rem}
.ab p{line-height:1.75;margin:0 0 1rem}
.ab-intro{color:var(--ab-text);max-width:64ch;margin-bottom:2.5rem}
.ab p a,.ab td a,.ab .ab-li{color:var(--ab-red)}
.ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem 3rem}
.ab-item{border-top:2px solid var(--ab-red);padding-top:1.25rem}
.ab-item p{color:var(--ab-text);font-size:.92rem}
.ab-diff-item{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1rem 3rem;padding:2rem 0;border-top:1px solid var(--ab-line)}
.ab-diff-item:first-of-type{border-top:0;padding-top:0}
.ab-diff-item h3{font-size:1.1rem;color:var(--ab-white)}
.ab-diff-item p{color:var(--ab-text);margin:0}
.ab-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 3rem}
.ab-list li{position:relative;padding:.9rem 0 .9rem 1.5rem;border-bottom:1px solid var(--ab-line);line-height:1.6;font-size:.92rem}
.ab-list li::before{content:'';position:absolute;left:0;top:1.45rem;width:8px;height:8px;background:var(--ab-red)}
.ab-origin{max-width:70ch;margin-bottom:3rem}
.ab-origin p{color:var(--ab-text)}
.ab-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.ab-person{background:var(--ab-panel);border:1px solid var(--ab-line);border-radius:6px;padding:1.5rem;display:flex;flex-direction:column}
.ab-person p{color:var(--ab-text);font-size:.9rem;flex:1}
.ab-li{font-size:.85rem}
.ab-table-wrap{overflow-x:auto;border:1px solid var(--ab-red);border-radius:6px}
.ab-facts{width:100%;border-collapse:collapse;font-size:.92rem}
.ab-facts caption{text-align:left;padding:1rem 1.25rem;color:var(--ab-muted);font-size:.8rem;border-bottom:1px solid var(--ab-red)}
.ab-facts th,.ab-facts td{text-align:left;vertical-align:top;padding:.9rem 1.25rem;border-bottom:1px solid var(--ab-line);line-height:1.6}
.ab-facts tr:last-child th,.ab-facts tr:last-child td{border-bottom:0}
.ab-facts th{font-family:var(--ab-head);font-weight:400;font-size:.78rem;color:var(--ab-red);width:30%;min-width:150px;white-space:nowrap}
.ab-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem 3rem}
.ab-q p{color:var(--ab-text);font-size:.92rem;margin:0}
.ab-contact{border-bottom:0}
@media (max-width:760px){.ab-hero{padding:56px 0 48px}.ab-sec{padding:3.5rem 0}.ab-diff-item{grid-template-columns:1fr;gap:.5rem}.ab-grid,.ab-list,.ab-team,.ab-faq{grid-template-columns:1fr}.ab-facts th{white-space:normal;width:38%;min-width:0}}
@media (prefers-reduced-motion:reduce){.ab *,.ab *::before{transition:none!important}}

/* Page-specific additions */
.ab-note { border: 1px solid var(--ab-red); border-radius: 6px; padding: 1.75rem; background: var(--ab-panel); max-width: 80ch; }
.ab-note p:last-child { margin-bottom: 0; }
.ab-list.one { grid-template-columns: 1fr; }
.ab-item h3 a { color: var(--ab-white); text-decoration: none; }
.ab-item h3 a:hover { color: var(--ab-red); }
.ab-updated { color: var(--ab-muted); font-size: 0.85rem; margin: 2.5rem 0 0; }
.ab .ab-note-follow { margin-top: 1.25rem; }
.ab .ab-cta { margin-top: 2.5rem; }
.ab .btn { color: #fff; } /* .ab p a would otherwise turn the button label red on red */