:root{
  --bg:#000;
  --panel:#040404;
  --panel2:#070707;
  --line:#202020;
  --line2:#2c2c2c;
  --text:#f7f7f7;
  --muted:#858585;
  --orange:#fa4616;
  --orange2:#fa4616;
  --shadow:0 30px 90px rgba(0,0,0,.74);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(720px 360px at 50% -140px,rgba(250,70,22,.09),transparent 70%),
    radial-gradient(520px 260px at 6% 8%,rgba(255,255,255,.018),transparent 72%),
    #000;
  color:var(--text);
  font:15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(250,70,22,.28);color:#fff}
.siteWrap{max-width:1120px;margin:auto;padding:18px 20px 72px}
.siteHeader{
  position:sticky;
  top:10px;
  z-index:40;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
  padding:9px 11px;
  border:1px solid #1f1f1f;
  border-radius:18px;
  background:rgba(3,3,3,.92);
  backdrop-filter:blur(22px) saturate(125%);
  box-shadow:0 22px 70px rgba(0,0,0,.68),0 1px 0 rgba(255,255,255,.035) inset;
}
.siteHeader:after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(250,70,22,.32),transparent);
  pointer-events:none;
}
.siteBrand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:#f7f7f7;
  text-decoration:none;
  font-weight:950;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.siteBrand img{
  width:36px;
  height:36px;
  flex:0 0 auto;
  border:1px solid #292929;
  border-radius:11px;
  background:#080808;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.siteBrand span span{color:var(--orange)}
.siteNav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
  flex-wrap:wrap;
}
.siteNav a{
  color:#8d8d8d;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  padding:8px 10px;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  transition:.16s ease;
}
.siteNav a:hover{
  color:#fff;
  border-color:#292929;
  background:#0a0a0a;
  transform:translateY(-1px);
}
.siteNav .homeButton{
  border-color:#2b2b2b;
  background:#0a0a0a;
  color:#d8d8d8;
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}
.siteNav .homeButton:hover{
  border-color:#4a3024;
  background:#0d0a08;
  color:#fff;
}
.siteNav .tips{
  border-color:#2a2a2a;
  background:#080808;
  color:#aaa;
}
.siteMain{margin-top:24px}
.hero,.contentCard{
  position:relative;
  border:1px solid #1d1d1d;
  border-radius:22px;
  background:linear-gradient(180deg,#040404,#020202);
  box-shadow:var(--shadow),0 1px 0 rgba(255,255,255,.02) inset;
}
.hero{
  padding:34px 34px 32px;
}
.hero:before,.contentCard:before{
  content:"";
  position:absolute;
  left:50%;
  top:-1px;
  width:32%;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(250,70,22,.38),transparent);
  pointer-events:none;
}
.contentCard{padding:30px}
.eyebrow{
  color:#fa4616;
  font-weight:900;
  letter-spacing:.18em;
  font-size:10px;
  text-transform:uppercase;
}
.lead,.muted{color:var(--muted)}
h1{
  font-size:38px;
  line-height:1.08;
  letter-spacing:-.04em;
  margin:.22em 0 .4em;
}
h2{
  margin-top:30px;
  font-size:20px;
  letter-spacing:-.02em;
}
p,li{color:#c8c8c8}
a{color:#fa4616}
.legal p,.legal li{color:#bdbdbd}
.legal li{margin:8px 0}
.siteFooter{
  max-width:1000px;
  margin:42px auto 0;
  padding:20px 4px 4px;
  border-top:1px solid #171717;
  color:#666;
}
.footerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footerBrand{display:flex;align-items:center;gap:9px;min-width:0}
.footerBrand img{
  width:28px;
  height:28px;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.footerBrand strong{display:block;color:#aaa;font-size:12px}
.footerBrand span{display:block;color:#555;font-size:10px}
.footerLinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  flex-wrap:wrap;
}
.footerLinks a{
  color:#666;
  text-decoration:none;
  padding:6px 7px;
  border-radius:7px;
  font-size:10px;
  font-weight:800;
}
.footerLinks a:hover{background:#080808;color:#bbb}
.footerCopy{width:100%;padding-top:7px;color:#555;font-size:9px}

.siteNav a.activeNav{color:#fff;border-color:#4a3024;background:#0d0a08;box-shadow:inset 0 0 0 1px rgba(250,70,22,.08)}
.blogHero{margin-bottom:18px;overflow:hidden}
.blogHero:after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(250,70,22,.14),transparent 67%);pointer-events:none}
.blogGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.blogCard{overflow:hidden;border:1px solid #1d1d1d;border-radius:20px;background:linear-gradient(180deg,#050505,#020202);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.blogCardImage{display:block;aspect-ratio:16/9;background:#080808;overflow:hidden;border-bottom:1px solid #171717}
.blogCardImage img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s ease}
.blogCard:hover .blogCardImage img{transform:scale(1.015)}
.blogCardBody{padding:20px}
.blogCard h2{margin:5px 0 9px;font-size:22px;line-height:1.18}
.blogCard h2 a{color:#f5f5f5;text-decoration:none}
.blogCard h2 a:hover{color:#fff}
.blogCard p{margin:0;color:#9a9a9a;font-size:14px}
.blogCardMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:13px;border-top:1px solid #151515;color:#666;font-size:11px}
.blogCardMeta a{font-weight:850;text-decoration:none}
.blogEmpty{text-align:center;padding:54px 34px}
.blogArticle{max-width:880px;margin:0 auto;padding:42px 52px}
.articleTop{display:flex;align-items:center;justify-content:space-between;gap:16px}
.articleDate{color:#666;font-size:11px}
.blogArticle>h1{max-width:790px;font-size:46px;line-height:1.04;margin:10px 0 16px}
.articleDek{max-width:760px;color:#a6a6a6;font-size:18px;line-height:1.55;margin-bottom:20px}
.affiliateDisclosure{margin:18px 0;padding:12px 14px;border:1px solid #30251f;border-left:3px solid var(--orange);border-radius:10px;background:#0b0807;color:#aaa;font-size:12px;line-height:1.5}
.articleHero{margin:24px -18px 30px}
.articleHero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid #202020;border-radius:18px;background:#080808;box-shadow:0 28px 70px rgba(0,0,0,.48)}
.articleBody{max-width:760px;margin:0 auto}
.articleBody h2{margin:38px 0 12px;font-size:28px;line-height:1.18;color:#f5f5f5}
.articleBody h3{margin:30px 0 10px;font-size:21px;color:#eee}
.articleBody h4{margin:25px 0 8px;font-size:17px;color:#ddd}
.articleBody p,.articleBody li{color:#c2c2c2;font-size:17px;line-height:1.78}
.articleBody p{margin:0 0 20px}
.articleBody ul,.articleBody ol{padding-left:23px;margin:0 0 22px}
.articleBody li{margin:7px 0}
.articleBody blockquote{margin:24px 0;padding:14px 18px;border-left:3px solid var(--orange);background:#080706;color:#c8c8c8;border-radius:0 12px 12px 0}
.articleBody a{color:#ff653b;text-underline-offset:3px}
.articleMedia{max-width:760px;margin:38px auto 0}
.articleMedia video{display:block;width:100%;max-height:620px;border:1px solid #222;border-radius:18px;background:#000}
.articleCta,.affiliateProgram{max-width:760px;margin:34px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border:1px solid #3a241b;border-radius:17px;background:linear-gradient(135deg,rgba(250,70,22,.11),#060504 48%,#030303)}
.articleCta strong,.affiliateProgram strong{display:block;color:#fff;font-size:18px}
.articleCta a,.affiliateProgram a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border:1px solid var(--orange);border-radius:11px;background:var(--orange);color:#fff;text-decoration:none;font-weight:900}
.affiliateProgram{border-color:#242424;background:linear-gradient(135deg,#080808,#030303)}
.affiliateProgram span{display:block;margin-top:4px;color:#fa4616;font-size:12px;font-weight:850}
.articleFine{max-width:760px;margin:34px auto 0;padding-top:18px;border-top:1px solid #171717;color:#5f5f5f;font-size:10px;line-height:1.55}

button,a,input,select,textarea{
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(250,70,22,.76);
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
}
@media(max-width:760px){
  .siteWrap{padding:10px 10px 58px}
  .siteHeader{
    top:4px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:7px 8px;
    padding:8px;
    border-radius:14px;
  }
  .siteBrand{
    grid-column:1;
    grid-row:1;
    overflow:hidden;
  }
  .siteBrand>span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .siteBrand img{width:32px;height:32px;border-radius:9px}
  .siteNav{
    grid-column:1/-1;
    grid-row:2;
    justify-content:flex-start;
    width:100%;
    gap:3px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .siteNav::-webkit-scrollbar{display:none}
  .siteNav a{padding:7px 8px;font-size:13px}
  .siteNav .homeButton{
    position:absolute;
    top:8px;
    right:8px;
    padding:7px 9px;
  }
  .siteBrand{padding-right:104px}
  .siteMain{margin-top:14px}
  .hero,.contentCard{border-radius:18px}
  .hero{padding:26px 20px 24px}
  .contentCard{padding:22px 18px}
  h1{font-size:31px}
  h2{font-size:18px}
  .footerInner{align-items:flex-start}
  .footerLinks{justify-content:flex-start}
  .blogGrid{grid-template-columns:1fr}
  .blogArticle{padding:30px 22px}
  .blogArticle>h1{font-size:37px}
  .articleHero{margin:20px 0 26px}
  .articleBody p,.articleBody li{font-size:16px}
  .articleCta,.affiliateProgram{align-items:flex-start;flex-direction:column}
}
@media(max-width:460px){
  .siteBrand{font-size:13px;padding-right:94px}
  .siteBrand img{width:30px;height:30px}
  .siteNav .tips{display:none}
  .siteNav a{font-size:12px}
  .hero{padding:24px 17px 22px}
  .contentCard{padding:20px 16px}
  h1{font-size:28px}
  .blogArticle{padding:24px 16px}
  .blogArticle>h1{font-size:32px}
  .articleDek{font-size:16px}
  .articleBody h2{font-size:24px}
}

/* Shared ClipForge product header tools */
.globalSiteHeader{grid-template-columns:auto minmax(0,1fr) auto}
.globalHeaderTools{display:flex;align-items:center;gap:7px;justify-self:end}
.globalCreditButton{display:flex;align-items:center;gap:6px;border:1px solid #292929;background:#080808;color:#aaa;border-radius:999px;padding:8px 11px;font:inherit;font-size:12px;font-weight:850;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.34)}
.globalCreditButton b{color:#fa4616}
.globalProfileWrap{position:relative}
.globalProfileButton{display:flex;align-items:center;gap:5px;border:1px solid #292929;background:#080808;color:#aaa;border-radius:999px;padding:4px;cursor:pointer}
.globalProfileButton img,.globalProfileButton>span:first-child{width:30px;height:30px;border-radius:50%;object-fit:cover}
.globalProfileButton>span:first-child{display:grid;place-items:center;background:#222;color:#fff;font-weight:900;font-size:11px}
.globalProfileMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;width:220px;padding:10px;border:1px solid #282828;border-radius:14px;background:#050505;box-shadow:0 24px 70px rgba(0,0,0,.85)}
.globalProfileMenu strong,.globalProfileMenu small{display:block;padding:2px 7px}
.globalProfileMenu small{color:#777;margin-bottom:6px}
.globalProfileMenu a{display:block;padding:9px 8px;border-radius:8px;color:#aaa;text-decoration:none;font-size:12px;font-weight:800}
.globalProfileMenu a:hover{background:#0c0c0c;color:#fff}
.hidden{display:none!important}
@media(max-width:900px){
  .globalSiteHeader{grid-template-columns:minmax(0,1fr) auto}
  .globalSiteHeader .siteNav{grid-column:1/-1;grid-row:2}
  .globalHeaderTools{grid-column:2;grid-row:1}
  .globalCreditButton span{display:none}
}
@media(max-width:520px){
  .globalCreditButton{padding:7px 9px}
  .globalProfileButton{padding:3px}
  .globalProfileButton img,.globalProfileButton>span:first-child{width:27px;height:27px}
}
