/* ── Trade Program + Become-a-Member — Design System v2 "Warm Modern" (UI v2 Phase 5/6, 2026-07-23) ──
   Token rewrite of style/trade-program.css. Same selectors (become-a-member.js binds
   .BecomeMember / .successMessage; tradeProgram FAQ jQuery binds #FAQToggle .toggle —
   do NOT rename). Legacy magenta #b4115e replaced by clay brand tokens. */

.TradeProgram{background:var(--tch-surface-warm); font-family:var(--tch-font-body); color:var(--tch-text);}
.TradeProgram .TopBanner{background:var(--tch-ink); padding:2% 0;}
.TradeProgram .BannerText{color:var(--tch-on-dark); float:left; width:50%; padding-top:8.5%;}
.TradeProgram .BannerText h1{color:var(--tch-on-dark); font-size:clamp(var(--tch-text-xl), 3.4vw, var(--tch-text-3xl)); font-weight:500; font-family:var(--tch-font-display); margin:0 0 var(--tch-space-3);}
.TradeProgram .BannerText h2{font-size:var(--tch-text-lg); font-weight:500; font-family:var(--tch-font-display); color:#fff;}
.TradeProgram .BannerText p{font-size:var(--tch-text-md); line-height:1.7; opacity:.92;}
.TradeProgram .BannerImg{float:left;}

.TradeProgram .HowtoSignUp{background:var(--tch-surface-warm); padding:2% 0; text-align:center;}
.TradeProgram .HowtoSignUp h3{margin:0; color:var(--tch-ink); font-size:var(--tch-text-2xl); font-weight:500; font-family:var(--tch-font-display);}
.TradeProgram .HowtoSignUp p.titltext{font-size:var(--tch-text-md); color:var(--tch-muted);}
.TradeProgram .HowtoSignUp ul.Step{margin:0; padding:0; display:flex; text-align:center; justify-content:center;}
.TradeProgram .HowtoSignUp ul.Step li{border:1px solid var(--tch-line); list-style:none; width:300px; height:300px; background:var(--tch-surface); border-radius:50%; margin:2%; justify-content:center; padding:40px; box-shadow:var(--tch-shadow-sm); transition:transform .5s ease, border-color .5s ease, box-shadow .5s ease;}
.TradeProgram .HowtoSignUp ul.Step li span{background:var(--tch-brand); color:#fff; display:inline-block; width:70px; line-height:70px; height:70px; border-radius:50%; font-weight:600; font-size:var(--tch-text-xl); font-family:var(--tch-font-display);}
.TradeProgram .HowtoSignUp ul.Step li p{font-size:var(--tch-text-base); color:var(--tch-ink-2);}
.TradeProgram .HowtoSignUp ul.Step li p b{font-size:var(--tch-text-md); color:var(--tch-ink);}
.TradeProgram .HowtoSignUp ul.Step li:hover{transform:scale(1.06); border:1px solid var(--tch-brand); box-shadow:var(--tch-shadow);}

.TradeProgram .HowtoSignUp .SignUpBtn{padding:20px 0; font-size:var(--tch-text-base); line-height:22px; color:var(--tch-ink-2);}
.TradeProgram .HowtoSignUp .SignUpBtn a.SignBtn{background:var(--tch-brand); color:#fff; font-size:var(--tch-text-md); font-weight:600; padding:15px; display:inline-block; width:270px; border-radius:var(--tch-radius-pill); box-shadow:var(--tch-shadow-sm); transition:background .3s ease, transform .3s ease;}
.TradeProgram .HowtoSignUp .SignUpBtn a.SignBtn:hover{background:var(--tch-brand-dark); color:#fff; transform:scale(1.05);}

.FaqGuide{background:var(--tch-ink); color:var(--tch-on-dark); padding:3% 0;}
.FaqGuide .FAQLeft{width:70%; float:left;}
.FaqGuide .FAQLeft h3{font-weight:500; font-size:var(--tch-text-xl); font-family:var(--tch-font-display); color:#fff;}
.FaqGuide .FAQLeft ul{margin:0; padding:0; max-width:80%;}
.FaqGuide .FAQLeft ul li p{display:none; line-height:1.7; opacity:.9;}
.FaqGuide .FAQLeft ul li{cursor:pointer;}
.FaqGuide .FAQLeft ul li h4{font-size:var(--tch-text-md); font-weight:600;}
.FaqGuide .FAQLeft ul li h4 span{background:url("https://cdn.theclassyhome.com/newimages/site/faq-accordian-icon.png") no-repeat right top; display:inline-block; width:20px; height:12px; float:right; margin-top:2px; margin-right:10px; transition:transform .25s ease;}
.FaqGuide .FAQLeft ul li.active h4 span{transform:rotate(180deg);}

.FaqGuide .FAQLeft ul li{list-style:none; border-bottom:1px solid rgba(246,233,220,.25);}
.FaqGuide .FAQLeft ul li p a{color:var(--tch-on-dark); text-decoration:underline;}

.FaqGuide .MemberPurchase{width:30%; float:left;}
.FaqGuide .MemberPurchase p{font-size:var(--tch-text-md); line-height:28px; opacity:.92;}
.FaqGuide .MemberPurchase p b{font-size:var(--tch-text-lg); font-weight:500; font-family:var(--tch-font-display); color:#fff;}
.FaqGuide .MemberPurchase ul{margin:25px 0 0 0; padding:0 0 0 10px; font-size:var(--tch-text-sm); opacity:.85;}
.FaqGuide .MemberPurchase ul li{padding:5px 0;}

.BecomeMember{padding:35px var(--tch-space-6); max-width:760px; margin:var(--tch-space-6) auto; background:var(--tch-surface); border:1px solid var(--tch-line); border-radius:var(--tch-radius-lg); box-shadow:var(--tch-shadow-sm);}
.BecomeMember h1{font-family:var(--tch-font-display); font-weight:500; font-size:var(--tch-text-xl); text-align:center; padding-bottom:0; color:var(--tch-ink); margin:0 0 var(--tch-space-2);}
.BecomeMember .TitleText{text-align:center; font-family:var(--tch-font-body); font-weight:400; font-size:var(--tch-text-base); color:var(--tch-muted); margin-top:0;}
.BecomeMember label{font-weight:600; font-size:var(--tch-text-sm); color:var(--tch-ink);}
.BecomeMember input[type="text"], .BecomeMember input[type="password"], .BecomeMember select{border:1px solid var(--tch-line); border-radius:var(--tch-radius); background:var(--tch-surface); color:var(--tch-text); transition:border-color .15s ease, box-shadow .15s ease;}
.BecomeMember input[type="text"]:focus, .BecomeMember input[type="password"]:focus, .BecomeMember select:focus{border-color:var(--tch-brand); box-shadow:0 0 0 3px rgba(191,91,45,.15);}
.BecomeMember .SubmitBtn{text-align:center; padding:25px 0;}
.BecomeMember .SubmitBtn button{background:var(--tch-brand); border:1px solid var(--tch-brand); color:#fff; font-size:var(--tch-text-md); padding:15px; display:inline-block; height:auto; width:270px; border-radius:var(--tch-radius-pill); font-family:var(--tch-font-body); font-weight:600; cursor:pointer; box-shadow:var(--tch-shadow-sm); transition:background .3s ease, transform .3s ease;}
.BecomeMember .SubmitBtn button:hover{background:var(--tch-brand-dark); border-color:var(--tch-brand-dark); transform:scale(1.04);}

@media only screen and (min-width:0) and (max-width:1220px){
	.TradeProgram .BannerText{float:none; width:auto; padding:2%;}
	.TradeProgram .BannerImg{float:none; text-align:center;}
	.TradeProgram .HowtoSignUp ul.Step li{padding:15px; width:260px; height:260px; margin:1%;}
	.TradeProgram .HowtoSignUp ul.Step li span{width:50px; line-height:50px; height:50px; font-size:20px;}
	.TradeProgram .HowtoSignUp ul.Step li p{font-size:16px;}
	.TradeProgram .HowtoSignUp ul.Step li p b{font-size:18px;}
	.FaqGuide .FAQLeft ul{max-width:95%;}
}

@media only screen and (min-width:0) and (max-width:1024px){
	.FaqGuide .FAQLeft{width:100%; float:none; text-align:center;}
	.FaqGuide .FAQLeft ul{width:95%; max-width:100%; margin:0 auto;}
	.FaqGuide .FAQLeft ul li{text-align:left;}
	.FaqGuide .MemberPurchase{width:90%; float:none; padding:2.5%;}
}

@media only screen and (min-width:0) and (max-width:960px){
	.TradeProgram .HowtoSignUp ul.Step{flex-wrap:wrap;}
}

@media only screen and (min-width:0) and (max-width:660px){
	.TradeProgram .BannerText h2{font-size:var(--tch-text-lg);}
	.TradeProgram .BannerText{padding:15px;}
	.TradeProgram .HowtoSignUp{padding:15px;}
	.TradeProgram .HowtoSignUp h3{font-size:var(--tch-text-xl);}
	.TradeProgram .HowtoSignUp p.titltext{font-size:var(--tch-text-md);}
	.TradeProgram .HowtoSignUp ul.Step li{margin:10px 0;}
	.TradeProgram .HowtoSignUp .SignUpBtn a.SignBtn{width:200px;}
	.FaqGuide .FAQLeft h3{font-size:var(--tch-text-lg); margin:10px 0;}
	.FaqGuide .MemberPurchase p{font-size:var(--tch-text-md); line-height:24px;}
	.TradeProgram .HowtoSignUp .SignUpBtn{padding:20px 0 0 0;}
	.BecomeMember{padding:25px var(--tch-space-4); margin:var(--tch-space-4) auto;}
}