/* White section, dark star-video cards and explicit destinations. */
html body.ops .op-tools-white{background:#fff!important;color:#20202a!important}
html body.ops .op-tools-white .op-head h2{color:#20202a!important}
html body.ops .op-tools-white .op-head .op-accent{color:#5f258e!important}
html body.ops .op-tools-white .op-lead{color:#45424d!important}
.op-kit__list--summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:34px 0 0}
html body.ops .op-tools-white .op-live-card{position:relative;isolation:isolate;overflow:hidden;background:#080513!important;border:1px solid #665180;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:20px;min-width:0;min-height:230px}
.op-live-card .op-card-stars{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.op-live-card::before{content:"";position:absolute;inset:0;background:rgba(5,3,16,.72);z-index:-1;pointer-events:none}
.op-live-card__copy{display:flex;flex-direction:column;gap:10px}
html body.ops .op-tools-white .op-live-card :is(b,span,p,a){color:#fff!important}
.op-live-card__copy b{font-size:17px;line-height:1.4}
.op-live-card__copy>span{font-size:15px;line-height:1.6}
html body.ops .op-tools-white a.op-live-card__button{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:10px 16px;border:1px solid #c9b6ff;border-radius:9px;background:#54209a;text-decoration:none;font:700 13px Lato,Arial,sans-serif;letter-spacing:.3px}
.op-live-card a:focus-visible{outline:3px solid #fff;outline-offset:4px}
.op-live-card__button:hover{background:#6b2db4!important}
@media(max-width:900px){.op-kit__list--summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.op-kit__list--summary{grid-template-columns:minmax(0,1fr)}}

html body.ops #your-build.op-offer-white{background:#fff!important;color:#191b23!important}
html body.ops #your-build.op-offer-white :is(h2,.op-accent,.op-lead,.op-fine){color:#191b23!important}
html body.ops #your-build .op-live-card{position:relative;isolation:isolate;overflow:hidden;background:#080513;border-color:#665180}
html body.ops #your-build .op-live-card :is(h3,p){color:#fff!important}

/* One grid per group sets a common height for every card and aligns the action row (audit 2026-10-16: eight modules fill
   two rows of four, four tools one row, no orphan slot; content sets the height, never a fixed minimum). */
html body.ops .op-tools-white .op-kit{display:block}
html body.ops .op-tools-white .op-kit__group{margin:40px 0 16px;font-size:clamp(22px,2vw,28px);line-height:1.2;color:#20202a!important}
html body.ops .op-tools-white .op-kit__group:first-child{margin-top:8px}
html body.ops .op-tools-white .op-kit__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:18px;align-items:stretch}
html body.ops .op-tools-white .op-live-card{height:100%;box-sizing:border-box;min-height:0}
html body.ops .op-tools-white .op-kit__list--tools .op-live-card{border-color:color-mix(in srgb,var(--ops-white-accent,#54209a),#fff 30%);box-shadow:inset 0 3px 0 color-mix(in srgb,var(--ops-white-accent,#54209a),#fff 25%)}
@media(max-width:1199px){html body.ops .op-tools-white .op-kit__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: each group is one swipe row with the next card peeking, instead of a 12-card wall. */
@media(max-width:600px){
 html body.ops .op-tools-white .op-kit__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;grid-auto-rows:auto;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:2px 2px 14px;margin-inline:-2px;scrollbar-width:thin}
 html body.ops .op-tools-white .op-kit__list>li{scroll-snap-align:start}
 html body.ops .op-tools-white .op-live-card{padding:20px;gap:16px}
}
/* BuildOps pilot buttons keep their copper finish but carry one icon: the extra launch glyph doubled every arrow. */
html body[data-ops-brand="buildops"] :is(.op-btn--primary,.op-subnav__cta,.op-live-card__button,.ops-monitor__controls a):is(a,button)::before{content:none!important;display:none!important}

html body.ops #roles{background:#fff!important;color:#191b23!important}
html body.ops #roles .op-head :is(h2,.op-accent){color:#54209a!important}
html body.ops #roles .op-lead{color:#191b23!important}
html body.ops #roles .op-roletabs{display:grid;grid-auto-rows:1fr;align-content:start;gap:14px}
html body.ops #roles .op-roletab{position:relative;isolation:isolate;overflow:hidden;background:#080513!important;border:2px solid #75618e;min-height:112px;height:100%;box-sizing:border-box;color:#fff!important}
html body.ops #roles .op-roletab :is(span,b,small){color:#fff!important}
html body.ops #roles .op-roletab .op-card-stars{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
html body.ops #roles .op-roletab::after{content:"";position:absolute;inset:0;background:#050310b8;z-index:-1;pointer-events:none}
html body.ops #roles .op-roletab[aria-selected=true]{border-color:#b779ed;box-shadow:0 0 0 2px #54209a!important}
html body.ops #roles .op-roletab:focus-visible{outline:3px solid #54209a;outline-offset:4px}
html body.ops #roles .op-cap,html body.ops #roles .op-cap b{color:#191b23!important}

/* Keep all role content inside its own column, including with a stale base stylesheet. */
html body.ops #roles .op-roles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:48px;align-items:start}
html body.ops #roles .op-roles>*{min-width:0;max-width:100%}
html body.ops #roles .op-roletab{display:flex;align-items:flex-start;gap:14px;width:100%;min-width:0;text-align:left;position:relative!important}
html body.ops #roles .op-roletab>span:last-child{min-width:0;flex:1;overflow-wrap:break-word}
html body.ops #roles .op-roletab__ico{flex:0 0 40px}
@media(max-width:800px){html body.ops #roles .op-roles{grid-template-columns:minmax(0,1fr);gap:28px}}

html body.ops :is(#your-build,#how-it-works,#roles,#tools) .op-head h2 .op-accent,
html body.ops .atlas-sales--wealth-white h2 span{color:var(--ops-white-accent,#54209a)!important}

/* White Roles copy needs clean edges, not the former dark-video text shadow. */
html body.ops #roles :is(h2,.op-lead,.op-cap){text-shadow:none!important}
