/* joinfthree — site styles (shared by every page). Tailwind utilities come from the CDN build;
   brand tokens live in /assets/js/tailwind.config.js. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.nav-link{position:relative;transition:color .2s ease}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(to right, #CC0000, #1D4ED8);transition:width .3s ease}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link:hover,.nav-link.active{color:#F5F5F5}
.btn-primary{background:#CC0000;color:#FFFFFF;font-weight:600;font-size:.875rem;padding:.75rem 2rem;border-radius:.375rem;border:none;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.btn-primary:hover{background:#E60000;transform:translateY(-1px);box-shadow:0 4px 12px rgba(204,0,0,0.35)}
.btn-secondary{background:transparent;color:#F5F5F5;font-weight:500;font-size:.875rem;padding:.75rem 2rem;border-radius:.375rem;border:1px solid #2D2D2D;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.btn-secondary:hover{border-color:#1D4ED8;background:rgba(29,78,216,0.05);color:#F5F5F5}
.card{background:#1A1A1A;border:1px solid #2D2D2D;border-radius:.75rem;padding:2rem;transition:border-color .3s ease,transform .3s ease}
.card:hover{border-color:#6B6B6B;transform:translateY(-2px)}
.card-static{background:#1A1A1A;border:1px solid #2D2D2D;border-radius:.75rem;padding:2rem}
.premium-card{background:linear-gradient(145deg,#1A1A1A 0%,#220505 100%);border:1px solid rgba(204,0,0,0.4);box-shadow:0 0 25px rgba(204,0,0,0.15);border-radius:.75rem;padding:2rem;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.premium-card:hover{transform:translateY(-2px);box-shadow:0 0 35px rgba(204,0,0,0.25);border-color:rgba(204,0,0,0.8)}
.premium-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#CC0000,#FF3333,#CC0000)}
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-answer.open{max-height:600px}
.section-divider{height:1px;background:linear-gradient(to right,transparent,#2D2D2D,transparent)}
.editorial-rule{height:2px;background:linear-gradient(to right,#CC0000,#1D4ED8);width:64px}
.qualify-in{border-left:3px solid #1D4ED8}
.qualify-out{border-left:3px solid #FFFFFF}
.mobile-menu{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mobile-menu.open{max-height:400px}
.text-link{color:#9A9A9A;text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}
.text-link:hover{color:#3B82F6}
.episode-card{position:relative;overflow:hidden;border-radius:.75rem}
.episode-card img,.episode-card svg{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.episode-card:hover img,.episode-card:hover svg{transform:scale(1.03)}
.episode-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.95) 0%,rgba(10,10,10,.3) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.cat-tag{display:inline-flex;align-items:center;background:rgba(204,0,0,.15);color:#FF3333;font-size:.625rem;font-weight:700;padding:.25rem .5rem;border-radius:.25rem;text-transform:uppercase;letter-spacing:.06em}
.illustrative-tag{display:inline-flex;align-items:center;background:rgba(29,78,216,.15);color:#3B82F6;font-size:.5625rem;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;text-transform:uppercase;letter-spacing:.04em}
.pull-quote{border-left:3px solid;border-image:linear-gradient(to bottom,#CC0000,#1D4ED8) 1;padding-left:1.5rem;font-size:1.25rem;font-style:italic;font-weight:300;line-height:1.5;color:#9A9A9A}
.logo-mark{display:flex;align-items:flex-end;height:22px;flex-shrink:0}
.logo-mark span{display:block;width:4px;background:#F5F5F5}
.logo-mark .bar1{height:60%;background:#CC0000}
.logo-mark .bar2{height:100%}
.logo-mark .bar3{height:80%;background:#1D4ED8}
.scarcity-pulse{animation:pulse-red 2.5s ease-in-out infinite}
@keyframes pulse-red{0%,100%{opacity:1}50%{opacity:.6}}
.value-check{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0}
.value-check-icon{width:18px;height:18px;background:rgba(29,78,216,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
/* FIX: original #6B6B6B on black background computes to 3.72:1 — fails WCAG AA (4.5:1) for
   normal-size text. #8A8A8A computes to 5.74:1, passing comfortably. Same token name kept. */
.capture-input{background:#0A0A0A;border:1px solid #2D2D2D;border-radius:.375rem;padding:.75rem 1rem;font-size:.875rem;color:#F5F5F5;width:100%}
.capture-input:focus{outline:none;border-color:#1D4ED8}
.capture-input::placeholder{color:#8A8A8A}
/* NEW: visible keyboard focus (WCAG 2.4.7) and reduced-motion support — same fixes applied
   across fthree.co and bizzdev.co. joinfthree has no ambient/infinite animation (unlike the
   other two sites' pulsing background), so only the fade-in reveal needs the reduced-motion rule. */
a:focus-visible, button:focus-visible { outline: 2px solid #CC0000; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
/* NEW: minimum touch target sizing per WCAG 2.5.5 and Apple/Google mobile HIG (44x44px min).
   Targets #mobile-menu a specifically — .nav-link sits inside "hidden md:flex" and is not
   rendered below the 768px breakpoint, so a rule scoped to .nav-link alone would have had
   zero visible effect at the exact width this media query applies to. */
@media (max-width: 767px) {
  .btn-primary, .btn-secondary { min-height: 44px; }
  #mobile-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* Blue link-button for the free list. White on #1D4ED8 = 6.7:1; hover darkens to keep AA. */
.btn-blue{background:#1D4ED8;color:#FFFFFF;font-weight:600;font-size:.875rem;padding:.75rem 2rem;border-radius:.375rem;border:none;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-blue:hover{background:#1E40AF;transform:translateY(-1px);box-shadow:0 4px 12px rgba(29,78,216,0.35)}
@media (max-width:767px){.btn-blue{min-height:44px}}


/* Anchor targets (#newsletter, #free-updates, #main) clear the 64px fixed nav */
[id]{scroll-margin-top:5rem}