/* FIELD TEST v3 / ACTUAL UI — dark editorial performance design */
:root{--ink:#0c120f;--deep:#111a15;--deep2:#25382c;--lime:#d6fb5a;--cream:#101611;--paper:#ffffff;--muted:#93a28e;--edge:#29382c;--soft:#e8eee5;--accent:#afd744;--radius:18px;--shadow:0 28px 70px rgba(0,0,0,.23)}
body{background:#101611;color:#eef4e9}
.sidebar{background:#090e0b;border-right:1px solid #2a382c}
.brand-icon{background:var(--lime);border-radius:5px;font-style:italic;transform:skew(-9deg)}
.brand-word{font-weight:1000;letter-spacing:-1.5px}
.side-promo{background:#181f18;border-color:#3a4c30}
.nav-button{border-radius:8px;letter-spacing:.3px;text-transform:uppercase;font-size:11px}
.nav-button:hover,.nav-button.active{background:#252e20;color:var(--lime)}
.main-frame,.scroll-region,.content{background:#101611}
.topbar{background:#101611;border-bottom:1px solid #2b362c;height:72px;flex-basis:72px}
.topbar h1{color:#f6f9f1;font-size:13px;text-transform:uppercase;letter-spacing:1.2px}
.topbar small{color:#819083;font-size:10px}
.demo-tag{background:#1e281d;color:var(--lime);border-color:#3d4d30;letter-spacing:1.1px}
.avatar{background:var(--lime);color:#14200d}
.icon-btn{background:#1b271d;border-color:#3b4c39;color:#def6d0}
.content{padding-top:25px}
.mobile-lead{color:var(--lime)}
.ft-opening{border:1px solid #37412f;border-radius:20px;overflow:hidden;background:#141d16}
.ft-open-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 27px;color:var(--lime);font-size:10px;font-weight:900;letter-spacing:1.7px;border-bottom:1px solid #364433}
.ft-open-meta span{display:flex;align-items:center;gap:10px}
.ft-open-meta span+span{color:#a3b09f}
.live-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #d6fb5a20}
.hero{border-radius:0;grid-template-columns:1.05fr .95fr;min-height:540px;box-shadow:none;background:#151e17}
.hero-copy{padding:44px 30px 34px 48px;justify-content:space-between}
.ft-sequence,.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:10px;font-weight:900;letter-spacing:1.8px;color:#abb6a3}
.ft-sequence span:first-child{color:var(--lime)}
.hero h2{font-family:Impact,'Arial Black','Helvetica Neue',sans-serif;font-stretch:condensed;font-weight:900;letter-spacing:-1.5px;font-size:clamp(64px,6.9vw,118px);line-height:.85;text-transform:uppercase;margin:24px 0 15px;max-width:none}
.hero h2 em{color:var(--lime)}
.hero-copy>p{color:#b4beb0;font-size:15px;max-width:430px;line-height:1.65;margin-bottom:22px}
.hero-buttons{width:100%;display:flex;gap:9px;flex-wrap:nowrap}
.hero-buttons .btn{min-height:52px;border-radius:6px;text-transform:uppercase;letter-spacing:.45px;flex:1;padding:12px 15px;white-space:nowrap;font-size:11px}
.hero-buttons .btn-lime{background:var(--lime);color:#10170d}
.hero-buttons .btn-white{background:transparent;color:#f6faef;border:1px solid #7b8a73}
.hero-foot{border-top:1px solid #39483c;margin-top:30px;padding-top:16px;font-size:9px}
.hero-art{background:radial-gradient(ellipse at 54% 48%,#8fba4c30 0%,transparent 50%),linear-gradient(120deg,#263d2c,#0b170e 65%);min-height:500px}
.hero-art:after{background:linear-gradient(0deg,#0c170c 0%,transparent 38%);z-index:0}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(#bddc8e0d 1px,transparent 1px),linear-gradient(90deg,#bddc8e0d 1px,transparent 1px);background-size:32px 32px;transform:perspective(600px) rotateX(8deg) scale(1.1);opacity:.95}
.art-number{position:absolute;z-index:1;top:30px;left:30px;font-family:Impact,sans-serif;font-size:92px;line-height:1;letter-spacing:-4px;color:#cfff5c20}
.art-number span{font-size:30px;letter-spacing:-1px}
.art-stamp{position:absolute;z-index:2;right:27px;top:28px;color:var(--lime);font-size:10px;font-weight:1000;letter-spacing:1.7px;line-height:1.1;text-align:right}
.art-stamp span{display:block;font-size:28px;margin-top:8px}
.art-orbit{position:absolute;border:1px solid #d8fc5575;top:12%;left:5%;width:90%;aspect-ratio:1;border-radius:50%;transform:rotate(-22deg) scaleY(.77)}
.art-orbit-2{top:23%;left:18%;width:65%;border-color:#bbee5350}
.art-gear{position:absolute;inset:6% 7% 10%;display:grid;place-items:center;z-index:1;filter:drop-shadow(0 30px 22px #080e0c99) drop-shadow(0 0 40px #d1ed5c35)}
.art-gear svg{height:min(88%,460px);width:93%;transform:rotate(-9deg) scale(1.08)}
.art-lab{position:absolute;z-index:3;bottom:37px;left:25px;right:25px;border:1px solid #9abf7385;background:#101a11ed;backdrop-filter:blur(12px);padding:15px 18px;border-radius:9px;color:white;box-shadow:0 15px 40px #0007}
.art-lab-head{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:950;letter-spacing:1.35px;color:var(--lime);border-bottom:1px solid #40553e;padding-bottom:11px}
.art-lab-head span:last-child{margin-left:auto;color:#91aa81;white-space:nowrap;font-size:8px}
.art-lab-main{display:flex;justify-content:space-between;gap:15px;padding-top:12px}
.art-lab-main small{display:block;font-size:8px;color:#95a88c;font-weight:900;letter-spacing:1.3px;margin-bottom:3px}
.art-lab-main strong{font-family:Impact,Arial,sans-serif;font-size:27px;letter-spacing:.3px}
.art-lab-main em{font-family:Arial,sans-serif;font-style:normal;font-size:9px;color:var(--lime);letter-spacing:.7px}
.art-caption{position:absolute;bottom:9px;right:26px;font-size:8px;letter-spacing:1px;font-weight:900;color:#a3c496;z-index:2}
.ft-counter{display:grid;grid-template-columns:repeat(3,1fr) 52px;min-height:90px;background:#d6fb5a;color:#10170e;align-items:center;padding:14px 22px;gap:13px}
.ft-counter>span{display:flex;align-items:center;gap:10px;border-right:1px solid #7a983f8c}
.ft-counter strong{font-family:Impact,Arial,sans-serif;font-size:40px;letter-spacing:-1px}
.ft-counter small{font-size:9px;font-weight:950;letter-spacing:1px;line-height:1.3;max-width:65px}
.ft-counter button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #213316;background:#141e10;color:var(--lime);border-radius:50%}
.ft-demo-note{margin-top:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10px;color:#a5b5a0;line-height:1.5;border:1px solid #3a4a35;padding:12px 15px;border-radius:9px;background:#1c281d}
.ft-demo-note strong{font-size:9px;color:var(--lime);letter-spacing:1px}
.ft-demo-note>span:last-child{flex:1;min-width:200px}
.pagehead h2,.ft-section .pagehead h2{color:#f4f8ef}
.ft-section{margin-top:52px}
.ft-section .pagehead h2{font-family:Impact,Arial,sans-serif;font-size:clamp(36px,4vw,57px);line-height:.92;font-weight:800;letter-spacing:.1px;text-transform:uppercase;margin-top:13px}
.ft-section .pagehead h2 em{font-style:normal;color:var(--lime)}
.eyebrow,.ft-section .eyebrow{color:var(--lime)!important}
.link-btn{color:var(--lime);font-size:10px;letter-spacing:1px}
.product-card{background:#1b241c;border:1px solid #3b4b36;border-radius:10px;box-shadow:none}
.product-card:hover{border-color:#b6d865}
.product-visual{height:240px;isolation:isolate;overflow:hidden}
.product-visual:before{content:'';position:absolute;width:190px;height:190px;border-radius:50%;border:1px solid #445d4844;box-shadow:0 0 0 25px #d4fa6145,0 0 0 50px #9eb87419;transform:rotate(-24deg) scaleY(.75)}
.product-visual svg{z-index:1;transform:rotate(-6deg);filter:drop-shadow(0 15px 15px #111a1244)}
.chip-top,.chip-right{border-radius:3px;font-size:8px;padding:6px 8px;letter-spacing:1px}
.chip-top{background:#f2f7e8;color:#1b2919}.chip-right{background:#151e17;color:var(--lime)}
.product-body{padding:19px}
.product-body h3{color:#f7fbf2;font-size:20px;letter-spacing:-.8px}
.product-body p{color:#a8b6a4;font-size:12px}
.product-foot{border-color:#3a4939}
.product-foot .score{color:var(--lime)}
.micro{color:var(--lime)}
.product-card .btn{background:#d6fb5a;color:#17200e;border-radius:5px;font-size:10px}
.save-float{border-radius:5px;background:#e9f4e4}
.campaign-card{background:#1b241c;border-color:#3b4b36;border-radius:10px;color:#f1f6ee}
.campaign-content h3{color:#f5faed}
.campaign-content p{color:#a4b3a3}
.campaign-card .btn{border-radius:5px}
.dual-feature{margin-top:35px}
.feature-panel{background:#d8f38d;border-radius:9px;color:#192615}
.feature-panel h3{font-family:Impact,Arial,sans-serif;font-size:36px;text-transform:uppercase;line-height:.96;letter-spacing:.2px}
.feature-panel.dark{background:#28392b;color:#eef8ed;border:1px solid #546f43}
.feature-panel.dark h3{color:var(--lime)}
.feature-panel .eyebrow{color:#344727!important}
.feature-panel.dark .eyebrow{color:var(--lime)!important}
.feature-panel p{font-size:12px}
.footer{color:#728c74;border-top:1px solid #354435;margin-top:35px}
.disclaimer{background:#202a1e;border-color:#43523c;color:#b4c2ad;border-radius:9px}
.white-panel{border-radius:12px}
.pagehead p{color:#a1b29f}
.pagehead .eyebrow{color:var(--lime)}
.filter-panel,.selection-bar{color:#f1f7ee}
.filter-panel .search-wrap{color:#152316}
.inline-tabs{color:#dce8da}
.tab{border-color:#435440;color:#dce8da}
.tab.active{background:var(--lime);color:#17220f}
.detail-sheet h2{color:#131e15}
.detail-sheet .micro{color:#4f723b}
.white-panel .eyebrow,.white-panel .micro{color:#527339!important}
.test-center{border-radius:10px}
.campaign-detail-hero{border-radius:10px}
.role-switch .active{background:var(--lime);color:#142313}
@media(max-width:760px){
 .topbar{height:64px;flex:0 0 64px;padding:0 18px;background:#101611}
 .mobile-logo .brand-icon{border-radius:4px;background:var(--lime);color:#101910;width:31px;height:31px}
 .mobile-logo .brand-word{color:#f1f5eb;font-size:18px}
 .mobile-logo .brand-word span{color:var(--lime)}
 .top-actions{gap:9px}
 .demo-tag{background:#23301e;border-color:#44543d;padding:6px 8px;color:var(--lime);font-size:8px}
 .avatar{background:var(--lime);color:#192419}
 .scroll-region{background:#101611}
 .content{padding:14px 12px calc(98px + env(safe-area-inset-bottom))}
 .mobile-lead{font-size:9px;color:#afc6a4;margin:3px 4px 14px;letter-spacing:1.35px}
 .ft-opening{border-radius:11px}
 .ft-open-meta{padding:12px 15px;font-size:8px;letter-spacing:1.05px}
 .ft-open-meta span+span{display:none}
 .hero{display:flex;flex-direction:column;min-height:0}
 .hero-copy{padding:22px 19px 12px;display:block}
 .ft-sequence{font-size:8px;letter-spacing:1.4px}
 .hero h2{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(52px,14.8vw,72px);letter-spacing:-.5px;line-height:.86;margin:23px 0 14px}
 .hero-copy>p{font-size:12px;line-height:1.5;margin:0 0 19px;color:#c1ccbc}
 .hero-buttons{gap:7px}
 .hero-buttons .btn{min-height:47px;min-width:0;flex:1;font-size:10px;letter-spacing:.1px;padding:10px 8px}
 .hero-buttons .btn svg{width:13px;height:13px}
 .hero-foot{display:none}
 .hero-art{height:260px;min-height:260px;flex:0 0 260px;overflow:hidden}
 .art-number{font-size:64px;top:9px;left:18px}
 .art-number span{font-size:21px}
 .art-stamp{top:13px;right:18px;font-size:8px}
 .art-stamp span{font-size:20px;margin-top:4px}
 .art-orbit{width:72%;top:-36%;left:13%}
 .art-orbit-2{width:51%;top:-15%;left:26%}
 .art-gear{inset:-33% 12% 6%}
 .art-gear svg{width:77%;height:80%;transform:rotate(-12deg) scale(1.05)}
 .art-lab{bottom:13px;left:12px;right:12px;padding:9px 11px;border-radius:5px}
 .art-lab-head{font-size:8px;padding-bottom:7px}
 .art-lab-head span:last-child{font-size:7px}
 .art-lab-main{padding-top:6px}
 .art-lab-main strong{font-size:21px}
 .art-lab-main em{font-size:8px}
 .art-lab-main small{font-size:7px}
 .art-caption{display:none}
 .ft-counter{min-height:67px;padding:8px 10px;grid-template-columns:repeat(3,1fr);gap:8px}
 .ft-counter>span{gap:6px}
 .ft-counter strong{font-size:29px}
 .ft-counter small{font-size:7px;max-width:64px}
 .ft-counter button{display:none}
 .ft-demo-note{margin-top:10px;padding:10px;font-size:9px;gap:7px}
 .ft-demo-note>span:last-child{flex-basis:100%}
 .ft-section{margin-top:31px}
 .pagehead{margin-bottom:15px}
 .ft-section .pagehead h2{font-size:37px;line-height:.94;margin-top:9px}
 .ft-section .pagehead .link-btn{font-size:9px}
 .card-grid{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:11px;margin-right:-12px;padding-right:12px;padding-bottom:8px;scrollbar-width:none}
 .card-grid::-webkit-scrollbar{display:none}
 .product-card{flex:0 0 min(78%,286px);scroll-snap-align:start}
 .product-visual{height:220px}
 .product-body{padding:16px}
 .product-body h3{font-size:18px}
 .product-body p{font-size:11px}
 .campaign-grid{grid-template-columns:1fr}
 .bottom-nav{background:#0d140e;border-top:1px solid #344433;box-shadow:0 -8px 30px #0008;height:calc(69px + env(safe-area-inset-bottom))}
 .bottom-nav button{color:#829581;letter-spacing:.1px;gap:5px}
 .bottom-nav button.active{color:var(--lime)}
 .bottom-nav button.active:before{background:var(--lime);width:25px;height:2px}
 .bottom-nav button svg{width:21px;height:21px}
 .bottom-nav button span{font-size:9px}
 .toast{bottom:calc(81px + env(safe-area-inset-bottom))}
 .pagehead h2{color:#eef6e8}
 .pagehead p{color:#b0c0aa}
 .card-grid .product-card{flex-basis:min(78%,286px)}
 .campaign-detail-hero{grid-template-columns:1fr}
 .filter-panel{color:#eaf3e6}
}
@media(max-width:380px){.hero h2{font-size:clamp(49px,14.2vw,58px)}.card-grid{grid-template-columns:none}.product-card{flex:0 0 min(83%,260px)}.hero-art{height:242px;min-height:242px;flex-basis:242px}.ft-counter strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.live-pulse{animation:none}}
/* Explicit contrast on light work surfaces: inherited dark-mode text must never disappear. */
.white-panel,.detail-sheet,.step-card,.comparison,.empty-state,.saved-card,.profile-details,.report-criterion,.search-wrap,.role-switch,.select,.count-circle,.inline-message,.comparison-value,.comparison-label{color:#172416}
.white-panel h3,.white-panel h4,.white-panel h2,.white-panel strong,.detail-sheet h2,.detail-sheet h3,.step-card h3,.saved-card strong,.compare-product h3,.comparison-value{color:#152013}
.white-panel p,.detail-sheet p,.step-card p{color:#546351}
.white-panel .muted,.detail-sheet .muted{color:#576653!important}
.white-panel .eyebrow,.white-panel .micro{color:#597837!important}
.count-circle{background:#deedbe;color:#172416}
.role-switch button.active{background:#172117;color:var(--lime)}
.report-criterion{background:#edf2e9}
.search-wrap input{color:#182517}
.ft-section .pagehead .eyebrow{color:var(--lime)!important}
.product-card .micro{color:var(--lime)}
.campaign-card .micro{color:var(--lime)}
.white-panel .test-center h3,.white-panel .test-track h3,.white-panel .test-center strong,.white-panel .test-track strong{color:#f3fbed}
.white-panel .test-center .eyebrow,.white-panel .test-track .micro{color:var(--lime)!important}
.white-panel .test-center p,.white-panel .test-track p{color:#b9cab7}