/* ============================================================
   Fonts — self-hosted (no third-party request), latin subset only
   ============================================================ */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');}

/* ============================================================
   Design tokens
   ============================================================ */
:root{
	--ink:#14161B;
	--paper:#F1F0EA;
	--paper-alt:#E7E4DA;
	--surface:#FFFFFF;
	--border:#E1DED2;
	--muted:#6B6F76;
	--amber:#E8A33D;
	--amber-ink:#7A4E12;
	--amber-text-on:#1A1300;
	--green:#3F9D63;
	--radius:12px;
	--max-width:1180px;
	--font-display:'Space Grotesk',ui-sans-serif,sans-serif;
	--font-body:'Inter',ui-sans-serif,sans-serif;
	--font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
}
[data-theme="dark"]{
	--ink:#F1F0EA;
	--paper:#14161B;
	--paper-alt:#1B1E24;
	--surface:#1B1E24;
	--border:#2B2E35;
	--muted:#9CA0A8;
	--amber-ink:#F1C77A;
}

*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease;overflow-x:hidden;}
html{overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

.genpromto-container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;}
.mono{font-family:var(--font-mono);}

/* ---------- Eyebrow / structural label ---------- */
.genpromto-eyebrow{font-family:var(--font-mono);font-size:0.8rem;color:var(--amber-ink);margin-bottom:0.5rem;display:flex;align-items:center;gap:0.4rem;}
.genpromto-eyebrow::before{content:"\203A";font-weight:700;}

/* ---------- Header ---------- */
.genpromto-header{border-bottom:1px solid var(--border);background:var(--paper);position:relative;z-index:10;}
.genpromto-header-inner{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;gap:1.5rem;max-width:var(--max-width);margin:0 auto;}
.genpromto-logo{display:flex;align-items:center;gap:0.55rem;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--ink);}
.genpromto-logo svg{width:26px;height:26px;color:var(--ink);}
.genpromto-primary-nav ul{list-style:none;display:flex;gap:1.75rem;margin:0;padding:0;flex-wrap:wrap;}
.genpromto-primary-nav a{color:var(--muted);font-size:0.92rem;}
.genpromto-primary-nav a:hover{color:var(--ink);}
.genpromto-nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:7px;width:36px;height:36px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;flex-shrink:0;}
.genpromto-nav-toggle svg{width:18px;height:18px;}
.genpromto-dark-toggle{background:none;border:1px solid var(--border);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem;color:var(--ink);flex-shrink:0;}

/* ---------- Ad slots (reserve space to prevent CLS) ---------- */
.genpromto-ad-slot{min-height:100px;margin:1.5rem 0;display:flex;align-items:center;justify-content:center;background:var(--paper-alt);border-radius:var(--radius);}

/* ---------- Terminal window chrome (signature motif) ---------- */
.genpromto-term{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04);}
.genpromto-term-bar{display:flex;align-items:center;gap:0.4rem;padding:0.6rem 0.8rem;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.genpromto-term-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.genpromto-term-dot.r{background:#e5605a;} .genpromto-term-dot.a{background:#e8b23d;} .genpromto-term-dot.g{background:#3f9d63;}
.genpromto-term-bar-label{margin-left:0.5rem;font-family:var(--font-mono);font-size:0.72rem;color:var(--muted);}

/* ---------- Hero (homepage) ---------- */
.genpromto-hero{padding:4rem 0 3rem;}
.genpromto-hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:3rem;align-items:center;max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;}
.genpromto-hero h1{font-size:2.5rem;line-height:1.12;margin:0.5rem 0 1rem;}
.genpromto-hero-sub{color:var(--muted);font-size:1.06rem;max-width:38ch;margin-bottom:1.75rem;}
.genpromto-hero-ctas{display:flex;gap:0.8rem;flex-wrap:wrap;}
.genpromto-btn{font-family:var(--font-mono);font-size:0.85rem;font-weight:600;padding:0.7rem 1.3rem;border-radius:8px;border:1px solid var(--border);cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem;background:var(--surface);color:var(--ink);}
.genpromto-btn.amber{background:var(--amber);border-color:var(--amber);color:var(--amber-text-on);}
.genpromto-hero-stats{display:flex;gap:1.75rem;margin-top:1.75rem;font-family:var(--font-mono);font-size:0.78rem;color:var(--muted);flex-wrap:wrap;}

.genpromto-term-body{padding:1.1rem 1.2rem 1.4rem;font-family:var(--font-mono);font-size:0.88rem;min-height:190px;}
.genpromto-term-line{color:var(--muted);margin-bottom:0.3rem;}
.genpromto-term-symbol{color:var(--amber-ink);font-weight:600;}
#genpromtoTyped{white-space:pre-wrap;color:var(--ink);}
.genpromto-cursor{display:inline-block;width:7px;height:1em;background:var(--amber);vertical-align:text-bottom;animation:genpromtoBlink 1s step-end infinite;}
@keyframes genpromtoBlink{50%{opacity:0;}}
.genpromto-term-result{margin-top:0.9rem;padding-top:0.9rem;border-top:1px dashed var(--border);display:none;}
.genpromto-term-result.show{display:block;}
.genpromto-term-result-actions{display:flex;gap:0.6rem;margin-top:0.7rem;flex-wrap:wrap;}
.genpromto-chip-btn{font-family:var(--font-mono);font-size:0.75rem;padding:0.35rem 0.7rem;border-radius:6px;border:1px solid var(--border);background:var(--paper);cursor:pointer;color:var(--ink);}
.genpromto-chip-btn.amber{background:var(--amber);border-color:var(--amber);color:var(--amber-text-on);}

/* ---------- Home sections ---------- */
.genpromto-home-section{padding:2.5rem 0;}
.genpromto-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.3rem;flex-wrap:wrap;gap:0.5rem;}
.genpromto-section-head h2{font-size:1.5rem;}
.genpromto-view-all{font-family:var(--font-mono);font-size:0.82rem;color:var(--amber-ink);font-weight:600;}

/* ---------- Card grid ---------- */
.genpromto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem;}
.genpromto-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease;}
.genpromto-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,0.08);text-decoration:none;}
.genpromto-card-chrome{display:flex;gap:0.35rem;padding:0.6rem 0.8rem;}
.genpromto-card-thumb{aspect-ratio:3/2;background:var(--paper-alt);overflow:hidden;}
.genpromto-card-thumb img{width:100%;height:100%;object-fit:cover;}
.genpromto-card-body{padding:0 1rem 1.1rem;}
.genpromto-card-title{margin:0 0 0.4rem;font-size:1.02rem;}
.genpromto-card-excerpt{color:var(--muted);font-size:0.88rem;margin:0 0 0.6rem;}
.genpromto-card-tag{font-family:var(--font-mono);font-size:0.72rem;padding:0.2rem 0.55rem;border-radius:5px;background:var(--paper-alt);color:var(--amber-ink);display:inline-block;}
.genpromto-card-tag::before{content:"--";}

/* ---------- Filters (CLI-flag styled) ---------- */
.genpromto-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.5rem 0;}
.genpromto-filter-btn{font-family:var(--font-mono);font-size:0.82rem;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:7px;padding:0.4rem 0.85rem;cursor:pointer;}
.genpromto-filter-btn::before{content:"--";}
.genpromto-filter-btn.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.genpromto-filter-item[hidden]{display:none;}

/* ---------- Single content ---------- */
.genpromto-single{padding-top:1.5rem;padding-bottom:3rem;}
.genpromto-single-header h1{font-size:2.1rem;margin:0.6rem 0 0.5rem;}
.genpromto-updated{color:var(--muted);font-size:0.82rem;font-family:var(--font-mono);}
.genpromto-meta-tags{display:flex;gap:0.5rem;flex-wrap:wrap;}
.genpromto-tag{background:var(--paper-alt);color:var(--amber-ink);font-family:var(--font-mono);font-size:0.75rem;font-weight:600;padding:0.2rem 0.6rem;border-radius:5px;}
.genpromto-tag::before{content:"--";}
.genpromto-single-thumb{border-radius:var(--radius);overflow:hidden;margin:1.2rem 0;aspect-ratio:16/9;background:var(--paper-alt);border:1px solid var(--border);}
.genpromto-single-thumb img{width:100%;height:100%;object-fit:cover;}
.genpromto-single-content{margin-top:1.3rem;font-size:1.03rem;max-width:70ch;}
.genpromto-single-content p{margin:0 0 1.1rem;}
.genpromto-single-content img{border-radius:var(--radius);}
.genpromto-single-content h2{font-size:1.3rem;margin:2rem 0 1rem;}
.genpromto-single-content h3{font-size:1.1rem;margin:1.4rem 0 0.7rem;}

/* ---------- Guide/prompt/blog layout with sticky TOC ---------- */
.genpromto-with-toc{display:grid;grid-template-columns:1fr 220px;gap:3rem;align-items:start;}
.genpromto-toc{position:sticky;top:5rem;font-family:var(--font-mono);font-size:0.82rem;}
.genpromto-toc-label{color:var(--muted);margin-bottom:0.7rem;}
.genpromto-toc a{display:block;padding:0.35rem 0;color:var(--muted);border-left:2px solid var(--border);padding-left:0.8rem;}
.genpromto-toc a:hover,.genpromto-toc a.is-active{color:var(--amber-ink);border-color:var(--amber);}

/* ---------- Copy button / prompt box ---------- */
.genpromto-prompt-box{background:var(--paper-alt);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin:1.25rem 0;}
.genpromto-prompt-text{white-space:pre-wrap;font-family:var(--font-mono);font-size:0.92rem;margin:0 0 0.8rem;color:var(--ink);}
.genpromto-copy-btn{background:var(--amber);color:var(--amber-text-on);border:none;border-radius:7px;padding:0.55rem 1.1rem;cursor:pointer;font-weight:600;font-family:var(--font-mono);font-size:0.85rem;}
.genpromto-copy-btn.genpromto-copied{background:var(--green);color:#fff;}

/* ---------- Numbered steps (genuinely sequential content) ---------- */
.genpromto-steps{list-style:none;margin:1.5rem 0;padding:0;counter-reset:step;}
.genpromto-steps li{counter-increment:step;display:grid;grid-template-columns:2.2rem 1fr;gap:0.9rem;margin-bottom:1.3rem;}
.genpromto-steps li::before{content:counter(step);font-family:var(--font-mono);font-weight:600;background:var(--ink);color:var(--paper);width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.9rem;}
.genpromto-steps h4{font-family:var(--font-display);font-size:1.05rem;margin:0 0 0.3rem;}
.genpromto-steps p{color:var(--muted);margin:0;}

/* ---------- Tips / common-mistakes callout box ---------- */
.genpromto-mistakes{background:var(--paper-alt);border-radius:var(--radius);padding:1.3rem 1.5rem;margin:1.5rem 0;}
.genpromto-mistakes li{margin-bottom:0.6rem;}
.genpromto-mistakes li:last-child{margin-bottom:0;}

/* ---------- FAQ accordion ---------- */
.genpromto-faq{margin:1.5rem 0;}
.genpromto-faq-item{border:1px solid var(--border);border-radius:9px;padding:0.8rem 1rem;margin-bottom:0.6rem;background:var(--surface);}
.genpromto-faq-item summary{font-weight:600;cursor:pointer;font-family:var(--font-display);}
.genpromto-faq-answer{margin-top:0.5rem;color:var(--muted);}

/* ---------- HowTo steps shortcode ---------- */
.genpromto-howto-steps{margin:1.5rem 0;padding-left:1.5rem;}
.genpromto-howto-steps li{margin-bottom:0.6rem;}

/* ---------- Related content ---------- */
.genpromto-related{margin-top:2.5rem;}
.genpromto-related h3{font-size:1.2rem;margin-bottom:1rem;}
.genpromto-related-card{display:block;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--ink);font-size:0.9rem;}
.genpromto-related-card span{display:block;padding:0.6rem;}

/* ---------- Tool embed ---------- */
.genpromto-tool-embed{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin:1.5rem 0;background:var(--surface);min-height:200px;}

/* ---------- Breadcrumbs ---------- */
.genpromto-breadcrumbs{font-family:var(--font-mono);font-size:0.8rem;color:var(--muted);margin:1.5rem 0 0.5rem;}
.genpromto-breadcrumbs a{color:var(--muted);}
.genpromto-breadcrumbs a:hover{color:var(--amber-ink);}
.genpromto-breadcrumb-sep{margin:0 0.35rem;}

/* ---------- Use-case hub groups ---------- */
.genpromto-usecase-hero{padding:1.5rem 0 0.5rem;max-width:65ch;}
.genpromto-usecase-hero p{color:var(--muted);margin-top:0.6rem;}
.genpromto-usecase-group{margin:2.2rem 0;}
.genpromto-usecase-group-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.9rem;flex-wrap:wrap;gap:0.5rem;}
.genpromto-usecase-group-head h2{font-size:1.15rem;}
.genpromto-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}

/* ---------- Footer ---------- */
.genpromto-footer{border-top:1px solid var(--border);margin-top:3rem;padding:2rem 0;background:var(--paper-alt);}
.genpromto-footer-inner{display:flex;flex-direction:column;gap:0.75rem;align-items:center;text-align:center;}
.genpromto-footer-inner nav ul{list-style:none;display:flex;gap:1.25rem;padding:0;margin:0;flex-wrap:wrap;justify-content:center;font-family:var(--font-mono);font-size:0.82rem;}
.genpromto-footer-inner nav a{color:var(--muted);}
.genpromto-footer-copy{color:var(--muted);font-size:0.85rem;margin:0;font-family:var(--font-mono);}

.genpromto-pagination{margin:2rem 0;text-align:center;}

.screen-reader-text{position:absolute;left:-9999px;}
.skip-link:focus{position:fixed;left:1rem;top:1rem;background:var(--amber);color:var(--amber-text-on);padding:0.5rem 1rem;z-index:999;border-radius:6px;}

@media (max-width:820px){
	.genpromto-hero-grid{grid-template-columns:1fr;}
	.genpromto-with-toc{grid-template-columns:1fr;}
	.genpromto-toc{display:none;}
	.genpromto-row3{grid-template-columns:1fr;}
}
@media (max-width:640px){
	.genpromto-header-inner{flex-wrap:wrap;}
	.genpromto-hero h1{font-size:1.7rem;}
	.genpromto-nav-toggle{display:inline-flex;}
	.has-js .genpromto-primary-nav{display:none;order:10;flex-basis:100%;}
	.has-js .genpromto-primary-nav.is-open{display:block;padding-top:0.8rem;border-top:1px solid var(--border);margin-top:0.9rem;}
	.has-js .genpromto-primary-nav ul{flex-direction:column;gap:0;flex-wrap:nowrap;}
	.has-js .genpromto-primary-nav li{border-bottom:1px solid var(--border);}
	.has-js .genpromto-primary-nav li:last-child{border-bottom:none;}
	.has-js .genpromto-primary-nav a{display:block;padding:0.7rem 0.1rem;font-size:1rem;}
}
@media (prefers-reduced-motion:reduce){
	.genpromto-cursor{animation:none;}
}