/* Reel Skills Pack: green accent on top of the site's style.css (loaded after it) */
:root { --o: #1f6b45; --lime: #c8ee6b; }
.btn, button.btn { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.demo span { background: var(--lime); }
.bump { background: #EEF8D0; }
.stack-total b, .stats b, .price b { color: var(--o); }
.btn:focus-visible, input:focus-visible, .bump:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.fan img { width: auto; max-width: 46%; }
ol.steps { list-style: none; counter-reset: s; text-align: left; margin-top: 18px; }
ol.steps li { counter-increment: s; position: relative; background: #FBF8F1; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 16px 13px 58px; margin-bottom: 9px; font-size: 17px; }
ol.steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); font: 900 17px/28px 'Archivo', sans-serif; text-align: center; }
ol.steps li b { display: block; font: 800 18px 'Archivo', sans-serif; }
.two { display: grid; gap: 12px; margin-top: 18px; text-align: left; }
.two > div { background: #FBF8F1; border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; }
.two b { display: block; font: 800 18px 'Archivo', sans-serif; margin-bottom: 4px; }
.two p { font-size: 16px; line-height: 1.45; }
.total { margin-top: 14px; text-align: center; font: 700 14px 'JetBrains Mono', monospace; letter-spacing: .08em; color: #4A463E; }

.launch { margin: 14px auto 0; max-width: 520px; background: var(--lime); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-size: 16px; line-height: 1.35; box-shadow: 4px 4px 0 var(--ink); }
.launch[hidden] { display: none; }