/* HookGenius /learn/ shared stylesheet — extracted 2026-04-21 from 162 inline copies (md5 61f003e9). Page-specific overrides stay inline on each page. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #0f172a; color: #e2e8f0; line-height: 1.7; }
.container { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; }
h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 1rem; background: linear-gradient(to right, #67e8f9, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h2 { font-size: 1.5rem; color: #f8fafc; margin: 2.5rem 0 1rem; border-bottom: 1px solid #334155; padding-bottom: 0.5rem; }
h3 { font-size: 1.1rem; color: #cbd5e1; margin: 1.5rem 0 0.5rem; }
p { color: #94a3b8; margin-bottom: 1rem; }
ul, ol { color: #94a3b8; margin: 1rem 0 1rem 1.5rem; }
li { margin-bottom: 0.5rem; }
.definition { background: #1e293b; border-left: 4px solid #06b6d4; padding: 1.5rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0; }
.definition p { margin: 0; color: #e2e8f0; }
.definition ul { margin: 0.5rem 0 0 1.5rem; color: #e2e8f0; }
.template { background: #1e293b; border: 1px solid #334155; padding: 1rem; margin: 0.75rem 0; border-radius: 8px; }
.template-label { font-family: 'Inter', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.5rem; }
.template pre { font-family: monospace; font-size: 0.9rem; color: #67e8f9; margin: 0; white-space: pre-wrap; }
.fix-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.fix-table th, .fix-table td { padding: 0.75rem 1rem; text-align: left; border: 1px solid #334155; }
.fix-table th { background: #1e293b; color: #f8fafc; font-weight: 600; }
.fix-table td { background: #0f172a; }
.fix-table code { font-family: monospace; color: #67e8f9; background: #1e293b; padding: 0.2rem 0.4rem; border-radius: 4px; }
.faq-item { margin: 1.5rem 0; }
.faq-item h3 { color: #f8fafc; font-weight: 600; }
.faq-item p { margin-top: 0.5rem; }
.cta { text-align: center; margin: 3rem 0; padding: 2rem; background: linear-gradient(135deg, #0e7490 0%, #1d4ed8 100%); border-radius: 16px; }
.cta h2 { border: none; margin: 0 0 1rem; color: #fff; }
.cta p { color: #e0f2fe; margin-bottom: 1.5rem; }
.cta a { display: inline-block; background: #fff; color: #0f172a; padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: transform 0.2s; }
.cta a:hover { transform: scale(1.05); }
.related { background: #1e293b; padding: 1.5rem; border-radius: 12px; margin: 2rem 0; }
.related h3 { margin-top: 0; color: #f8fafc; }
.related ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.related li { margin: 0.5rem 0; }
.related a { color: #67e8f9; text-decoration: none; }
.related a:hover { text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 2rem; color: #67e8f9; text-decoration: none; }
.back-link:hover { text-decoration: underline; }