/* Trading Battles: an arena identity with readable, product-led sections. */
.ba-page{--ba-ink:#202239;--ba-purple:#6650ad;--ba-cyan:#80e1e5}
.ba-page .pl-section{padding:72px 0}
.ba-page p{font-size:17px;line-height:1.7}
.ba-banner{background:radial-gradient(ellipse at 80% 35%,#443777 0,transparent 52%),linear-gradient(130deg,#171b32,#252543 65%,#1b3646);color:#fff;overflow:hidden}
.ba-nav{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:18px;padding-bottom:18px;border-bottom:1px solid #ffffff20;font-size:14px}
.ba-nav>div{display:flex;gap:27px}
.ba-nav a{color:#dee0ee;min-height:44px;display:inline-flex;align-items:center}
.ba-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:45px;align-items:center;padding-top:42px;padding-bottom:42px}
.ba-page .ba-banner .ed-kicker,.ba-page .ba-final .ed-kicker{color:#b3e9ed!important}
.ba-page .ba-hero h1{color:#fff;font-size:clamp(48px,5.2vw,72px);line-height:1.05;letter-spacing:-2px}
.ba-hero h1 span{color:#ff963a}
.ba-hero-copy>p:not(.ed-kicker):not(.ba-note){max-width:560px;margin-top:24px;font-size:19px;color:#d8dbea}
.ba-banner .pl-secondary,.ba-final .pl-secondary{color:#e9ebff}
.ba-page .ba-note{font-size:15px;line-height:1.7;margin-top:22px;color:#bac4dc}
.ba-hero-art{position:relative;isolation:isolate;text-align:center;max-width:430px;width:100%;justify-self:center}
.ba-hero-art img{display:block;width:100%;height:auto;position:relative;z-index:1}
.ba-orbit{position:absolute;inset:15% 0 7%;border:1px solid #9ce7ed66;border-radius:50%;transform:rotate(-20deg);box-shadow:0 0 75px #7476d72b,inset 0 0 70px #616cbd40;z-index:-1}
.ba-orbit:after{content:"";position:absolute;inset:15px -22px;border:1px solid #b19cfb44;border-radius:50%;transform:rotate(35deg)}
.ba-art-label{position:relative;display:inline-block;letter-spacing:3px;font-size:11px;color:#a9dbdf;padding:9px 15px;border:1px solid #8da3bf55;border-radius:30px}
.ba-art-caption{position:relative;display:inline-block;z-index:2;margin-top:-10px;padding:12px 20px;background:#35314f;border:1px solid #81769e;color:#fff;border-radius:12px;transform:rotate(-4deg);font-size:15px}
.ba-match-strip{display:flex;align-items:center;justify-content:center;gap:40px;padding-top:24px;padding-bottom:28px;border-top:1px solid #ffffff20;font-size:16px;color:#e0dff0}
.ba-match-strip>span:not(.ba-versus){display:flex;gap:14px;align-items:center}
.ba-match-strip b{font-size:11px;letter-spacing:1.5px;color:#a2e1e5}
.ba-versus{display:grid;place-content:center;border:1px solid #b49ccb66;background:#393451;border-radius:50%;width:42px;height:42px;font-size:13px;color:#ffbd7b}
.ba-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.ba-intro-grid p+p{margin-top:18px}
.ba-formats{background:#f4f3fa}
.ba-section-heading{max-width:820px;margin:0 auto 35px;text-align:center}
.ba-section-heading>p:last-child:not(.ed-kicker){margin:20px auto 0;max-width:650px}
.ba-mode-tour{background:white;border:1px solid #dedde9;border-radius:20px;overflow:hidden}
.ba-mode-tabs{display:grid;grid-template-columns:1fr 1fr;background:#eeedf6}
.ba-mode-tabs button{border:0;border-right:1px solid #dddbe8;background:transparent;position:relative;padding:24px 28px;display:grid;grid-template-columns:48px 1fr;gap:4px 14px;text-align:left;cursor:pointer;color:#596277;transition:background .2s}
.ba-mode-tabs button:last-child{border-right:0}
.ba-mode-tabs button>span{grid-row:span 2;display:grid;place-content:center;width:46px;height:46px;border-radius:12px;background:#e1ddf5;color:#635091;font-size:29px}
.ba-mode-tabs button strong{font-size:21px;font-weight:500}
.ba-mode-tabs button small{font-size:15px}
.ba-mode-tabs button[aria-selected=true]{background:#fff5e9;color:#26283f}
.ba-mode-tabs button[aria-selected=true]>span{background:#ffdfbc;color:#b5590b}
.ba-mode-tabs button[aria-selected=true]:after{content:"";position:absolute;bottom:0;left:0;height:3px;width:100%;background:var(--pl-orange);transform-origin:left}
.ba-mode-tour.is-autoplay .ba-mode-tabs button[aria-selected=true]:after{transform:scaleX(var(--tour-progress,0))}
.ba-mode-panel:not([hidden]){display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:35px 55px;min-height:620px;animation:ba-in .3s ease}
.ba-mode-copy{max-width:450px}
.ba-tag{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#6f5d97}
.ba-page .ba-mode-copy h3{font-size:32px;line-height:1.2;margin:20px 0}
.ba-mode-copy aside{margin:25px 0;background:#f0f4fa;border-left:3px solid #748ac2;padding:20px}
.ba-mode-copy aside>span{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#586c94}
.ba-mode-copy aside p{font-size:18px;line-height:1.5;margin-top:10px}
.ba-mode-copy .pl-secondary{display:inline-flex;align-items:center;min-height:44px}
.ba-screen{display:block;width:100%;border:1px solid #d9dfe8;border-radius:12px;padding:0;overflow:hidden;background:#fff;cursor:zoom-in}
.ba-mode-panel .ba-screen{max-width:350px;justify-self:center;box-shadow:0 15px 40px -25px #25214366}
.ba-screen img{display:block;width:100%;height:auto}
.ba-screen>span{display:block;min-height:44px;padding:12px;background:#f5f7fa;color:#42566c;border-top:1px solid #dde4eb;font-size:14px;transition:background .2s}
.ba-tour-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #e6e4ed;padding:16px 28px;color:#657184}
.ba-tour-footer small{font-size:14px}
.ba-tour-footer button{min-height:44px;font-size:14px;border:1px solid #d3d8e1;border-radius:24px;background:white;padding:9px 16px;cursor:pointer;flex-shrink:0;color:#3d4c63}
.ba-friends-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:65px;align-items:center}
.ba-friend-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:38px 0;padding:0}
.ba-friend-steps li{border-top:1px solid #dedee8;padding-top:23px}
.ba-friend-steps li>span{display:inline-grid;place-content:center;width:42px;height:42px;background:#ece9f9;color:#63509d;border-radius:12px;font-size:17px;margin-bottom:18px}
.ba-friend-steps h3{margin-bottom:12px}
.ba-invite-preview{max-width:100%;padding:22px;border:1px solid #e4e4ef;background:#f3f4fa;border-radius:16px}
.ba-friend-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:30px}
.ba-friend-cta h3{font-size:23px;margin-bottom:10px}
.ba-friend-cta .pl-button{flex-shrink:0}
.ba-decisions{background:#eff7f7}
.ba-decision-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ba-decision-cards article{background:white;border:1px solid #d8e6e6;border-radius:16px;padding:27px}
.ba-card-mark{display:inline-flex;color:#38727a;background:#e5f1f0;border-radius:10px;padding:10px 14px;font-size:18px}
.ba-decision-cards h3{margin:23px 0 12px}
.ba-next-links{display:flex;justify-content:center;gap:24px 45px;flex-wrap:wrap;margin-top:30px}
.ba-next-links a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;color:#346270}
.ba-definition{background:#fff}
.ba-page .pl-questions{background:#f7f7fa}
.ba-page .pl-questions details p{font-size:17px}
.ba-final{background:radial-gradient(ellipse at 90% 100%,#433768,transparent 65%),#1c2038;text-align:center;color:#fff}
.ba-page .ba-final h2{color:#fff;font-size:clamp(34px,3.7vw,50px)}
.ba-final h2 span{color:#ffab62}
.ba-final p:not(.ed-kicker){color:#d2d9e6;max-width:620px;margin:22px auto 0}
.ba-final .pl-actions{justify-content:center}
.ba-final small{display:block;font-size:14px;color:#b9c3d7;margin-top:25px;line-height:1.6}
@keyframes ba-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(hover:hover){.ba-screen:hover>span{background:#fff0de}.ba-mode-tabs button:hover{background:#fff7ec}.ba-nav a:hover{color:#ffc08a}}
@media(max-width:1000px){.ba-hero{gap:25px}.ba-hero-art{max-width:350px}.ba-mode-panel:not([hidden]){gap:35px;padding:30px;min-height:610px}.ba-mode-copy h3{font-size:28px}.ba-intro-grid,.ba-friends-heading{gap:35px}.ba-match-strip{gap:20px}.ba-match-strip>span:not(.ba-versus){flex-direction:column;gap:5px}.ba-friend-steps{gap:24px}.ba-decision-cards{gap:16px}.ba-decision-cards article{padding:22px}.ba-friend-cta .pl-button{padding:16px 23px;font-size:16px}}
@media(max-width:700px){.ba-page .pl-section{padding:48px 0}.ba-hero{grid-template-columns:1fr;gap:30px;padding-top:30px}.ba-page .ba-hero h1{font-size:clamp(45px,12vw,60px)}.ba-hero-art{max-width:300px}.ba-hero-copy>p:not(.ed-kicker):not(.ba-note){font-size:18px}.ba-nav{font-size:12px;gap:18px;padding-top:8px;padding-bottom:8px}.ba-nav>div{gap:3px 14px;flex-wrap:wrap;justify-content:flex-end}.ba-match-strip{font-size:13px;gap:12px;text-align:center}.ba-match-strip>span:not(.ba-versus){flex:1;line-height:1.5}.ba-versus{flex-shrink:0;width:34px;height:34px}.ba-intro-grid,.ba-friends-heading,.ba-friend-steps,.ba-decision-cards{grid-template-columns:1fr;gap:27px}.ba-mode-panel:not([hidden]){grid-template-columns:1fr;padding:24px;gap:26px;min-height:0}.ba-mode-tabs button{grid-template-columns:1fr;gap:9px;padding:18px 12px;text-align:center;justify-items:center}.ba-mode-tabs button>span{grid-row:auto;width:42px;height:42px}.ba-mode-tabs button strong{font-size:18px}.ba-mode-tabs button small{font-size:14px;line-height:1.4}.ba-page .ba-mode-copy h3{font-size:28px}.ba-mode-panel .ba-screen{max-width:300px}.ba-tour-footer{padding:15px;gap:12px}.ba-tour-footer small{font-size:14px;line-height:1.6}.ba-friend-steps{margin:28px 0}.ba-friend-steps li{padding-top:20px}.ba-invite-preview{padding:10px}.ba-friend-cta{flex-direction:column;align-items:flex-start;gap:22px}.ba-next-links{justify-content:flex-start;gap:15px}.ba-final .pl-actions{flex-direction:column}.ba-art-label{font-size:10px}.ba-page .ba-mode-tabs button:focus-visible{outline-offset:-4px}}
@media(prefers-reduced-motion:reduce){.ba-mode-panel:not([hidden]){animation:none}}